@olenbetong/synergi-react 2.0.1 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -79,8 +79,7 @@
     "replace-in-files": "^3.0.0"
   },
   "scripts": {
-    "build": "pnpm run build:tsc && pnpm run build:tsc:post && pnpm run build:esbuild && pnpm run build:sass && pnpm run build:sass:components",
-    "build:tsc": "find . -name '*.tsbuildinfo' -delete && rm -rf ./es && tsc",
+    "build": "pnpm run build:tsc:post && pnpm run build:esbuild && pnpm run build:sass && pnpm run build:sass:components",
     "build:esbuild": "rm -rf ./dist && node --experimental-strip-types ../../scripts/esbuild.ts",
     "build:sass": "sass ./src/index.scss ./dist/styles/styles.css --source-map-urls=relative --style compressed",
     "build:sass:components": "node ./scripts/buildSassComponents.mjs",

package/src/DateNavigator/index.css

@@ -0,0 +1,96 @@
+:root {
+	--ob-datenavigator-height: 3rem;
+}
+
+.ObDateNavigator-icon {
+	display: inline-block;
+
+	svg {
+		width: 0.625em;
+		position: relative;
+		top: -1px;
+	}
+}
+
+.ObDateNavigator-root {
+	background-color: hsl(220, 20%, 96%);
+	background-color: var(--block-header-color-bg);
+	display: flex;
+	font-size: 1rem;
+	outline: none;
+
+	&:focus-visible {
+		outline: 2px solid var(--brand-dark, #336699);
+		outline-offset: 2px;
+	}
+}
+
+.ObDateNavigator-arrow {
+	display: flex;
+	align-items: center;
+	flex: 0 0 var(--ob-datenavigator-height);
+	justify-content: center;
+
+	height: var(--ob-datenavigator-height);
+
+	cursor: pointer;
+	text-align: center;
+
+	&:hover:not(:disabled) {
+		background-color: #e3e3e3;
+		background-color: var(--block-header-button-hover);
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		color: rgba(0 0 0 / 0.2);
+	}
+}
+
+.ObDateNavigator-arrowLeft {
+	border-right: 1px solid #dddddd;
+	order: 1;
+}
+
+.ObDateNavigator-arrowRight {
+	border-left: 1px solid #dddddd;
+	order: 3;
+}
+
+.ObDateNavigator-date {
+	display: flex;
+	flex: 1 1 100%;
+	flex-direction: column;
+	justify-content: center;
+	order: 2;
+
+	height: var(--ob-datenavigator-height);
+
+	text-align: center;
+}
+
+.ObDateNavigator-today {
+	order: 4;
+	padding: 0 1rem;
+	height: var(--ob-datenavigator-height);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.875rem;
+	color: var(--brand-dark, #336699);
+	text-transform: uppercase;
+	cursor: pointer;
+
+	text-wrap: nowrap;
+
+	border-left: 1px solid #dddddd;
+
+	&:hover:not(:disabled) {
+		background-color: var(--block-header-button-hover);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--brand-dark, #336699);
+		outline-offset: 2px;
+	}
+}

package/src/DateNavigator/index.tsx

@@ -1,4 +1,4 @@
-import "./index.scss";
+import "./index.css";
 
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import clsx from "clsx";
@@ -15,7 +15,7 @@ function Arrow({
 	return (
 		<button
 			className={clsx(
-				"ObDateNavigator-arrow",
+				"ObDateNavigator-arrow btn-reset",
 				direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight",
 			)}
 			aria-label={direction === "left" ? getLocalizedString("Previous day") : getLocalizedString("Next day")}
@@ -52,19 +52,42 @@ const formatter = new Intl.DateTimeFormat(getUiCulture(), {
 
 const oneDay = 24 * 60 * 60 * 1000;
 
+export type DateNavigatorProps = {
+	date?: Date | string | number;
+	defaultDate?: Date | string | number; // For default uncontrolled value
+	disableTodayButton?: boolean;
+	onChange?: (date: Date) => void;
+	minDate?: Date | string | number;
+	maxDate?: Date | string | number;
+};
+
+function sanitizeDate(date: Date | string | number): Date {
+	if (typeof date === "string" || typeof date === "number") {
+		let parsedDate = new Date(date);
+		if (Number.isNaN(parsedDate.getTime())) {
+			throw new Error(`Invalid date value: ${date}`);
+		}
+		return parsedDate;
+	} else if (date instanceof Date) {
+		if (Number.isNaN(date.getTime())) {
+			throw new Error(`Invalid date object: ${date}`);
+		}
+		return new Date(date.getTime()); // Return a copy of the date
+	} else {
+		throw new Error(`Unsupported date type: ${typeof date}`);
+	}
+}
+
 export function DateNavigator({
 	date: dateProp,
+	defaultDate,
+	disableTodayButton,
 	onChange,
-	minDate,
-	maxDate,
-}: {
-	date?: Date;
-	onChange?: (date: Date) => void;
-	minDate?: Date;
-	maxDate?: Date;
-}) {
-	let [internalDate, setInternalDate] = useState(new Date());
-	let date = dateProp ?? internalDate;
+	minDate: minDateProp,
+	maxDate: maxDateProp,
+}: DateNavigatorProps) {
+	let [internalDate, setInternalDate] = useState(() => (defaultDate ? sanitizeDate(defaultDate) : new Date()));
+	let date = dateProp ? sanitizeDate(dateProp) : internalDate;
 	let dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
 	let today = new Date();
 	let todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
@@ -78,6 +101,8 @@ export function DateNavigator({
 		return base;
 	})();
 
+	let minDate = minDateProp && sanitizeDate(minDateProp);
+	let maxDate = maxDateProp && sanitizeDate(maxDateProp);
 	let disablePrev = !!minDate && dateUtc <= Date.UTC(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
 	let disableNext = !!maxDate && dateUtc >= Date.UTC(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
 
@@ -88,8 +113,8 @@ export function DateNavigator({
 			newDate = new Date(maxDate); // Ensure we don't go above maxDate
 		}
 
-		if (onChange) onChange(newDate);
-		else setInternalDate(newDate);
+		onChange?.(newDate);
+		setInternalDate(newDate);
 	}
 
 	function jumpToToday() {
@@ -148,9 +173,11 @@ export function DateNavigator({
 			<Arrow direction="left" onClick={() => updateDate(new Date(dateUtc - oneDay))} disabled={disablePrev} />
 			<div className="ObDateNavigator-date">{text}</div>
 			<Arrow direction="right" onClick={() => updateDate(new Date(dateUtc + oneDay))} disabled={disableNext} />
-			<button type="button" className="ObDateNavigator-today" onClick={jumpToToday}>
-				{getLocalizedString("Today")}
-			</button>
+			{!disableTodayButton && (
+				<button type="button" className="ObDateNavigator-today btn-reset" onClick={jumpToToday}>
+					{getLocalizedString("Today")}
+				</button>
+			)}
 			<div aria-live="polite" ref={liveRef} style={{ position: "absolute", left: "-9999px" }} />
 		</div>
 	);

package/src/index.scss

@@ -1,6 +1,6 @@
 @use "Checkbox/index.scss";
 @use "ColorCard/index.css" as index2;
-@use "DateNavigator/index.scss" as index3;
+@use "DateNavigator/index.css" as index3;
 @use "LinkedCardList/index.scss" as index4;
 @use "PageBanner/index.scss" as index5;
 @use "ProgressBar/index.scss" as index6;

package/src/DateNavigator/index.scss

@@ -1,93 +0,0 @@
-@use "../styles/mixins";
-
-$date-select-height: 3rem;
-
-.ObDateNavigator-icon {
-  display: inline-block;
-
-  svg {
-    width: 0.625em;
-    position: relative;
-    top: -1px;
-  }
-}
-
-.ObDateNavigator-root {
-  background-color: hsl(220, 20%, 96%);
-  background-color: var(--block-header-color-bg);
-  display: flex;
-  font-size: 1rem;
-  outline: none;
-
-  &:focus-visible {
-    outline: 2px solid var(--brand-dark, #336699);
-    outline-offset: 2px;
-  }
-}
-
-.ObDateNavigator-arrow {
-  @include mixins.btn-reset;
-  display: flex;
-  align-items: center;
-  flex: 0 0 $date-select-height;
-  justify-content: center;
-
-  height: $date-select-height;
-
-  cursor: pointer;
-  text-align: center;
-
-  &:hover {
-    background-color: #e3e3e3;
-    background-color: var(--block-header-button-hover);
-  }
-}
-
-.ObDateNavigator-arrowLeft {
-  border-right: 1px solid #dddddd;
-  order: 1;
-}
-
-.ObDateNavigator-arrowRight {
-  border-left: 1px solid #dddddd;
-  order: 3;
-}
-
-.ObDateNavigator-date {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  justify-content: center;
-  order: 2;
-
-  height: $date-select-height;
-
-  text-align: center;
-}
-
-.ObDateNavigator-today {
-  @include mixins.btn-reset;
-  order: 4;
-  padding: 0 1rem;
-  height: $date-select-height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-  color: var(--brand-dark, #336699);
-  text-transform: uppercase;
-  cursor: pointer;
-
-	text-wrap: nowrap;
-
-	border-left: 1px solid #dddddd;
-
-  &:hover {
-    background-color: var(--block-header-button-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--brand-dark, #336699);
-    outline-offset: 2px;
-  }
-}