@olenbetong/synergi-react 0.6.45 → 0.7.0

package/src/ColorCard/index.scss

@@ -1,154 +1,154 @@
 @import "../styles/variables";
 
 .ObColorCard-root {
-  --bg-color-border: black;
-  --bg-color-main: white;
-  --bg-size: 0.75rem;
-  --card-color: rgb(0, 0, 0);
-
-  align-items: stretch;
-  background-image: linear-gradient(to right, $brand-primary, $brand-primary 0.75rem, white 0.75rem, white);
-  background-image: linear-gradient(
-    to right,
-    var(--bg-color-border),
-    var(--bg-color-border) var(--bg-size),
-    var(--bg-color-main) var(--bg-size),
-    var(--bg-color-main)
-  );
-  border-radius: 0.25rem;
-  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);
-  color: #666;
-  cursor: pointer;
-  display: flex;
-  font-family: "Variable Bahnschrift", "Bahnschrift", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  min-height: 10rem;
-  overflow: hidden;
-  transition: all ease-in-out 300ms;
-
-  &:nth-of-type(5n + 1) {
-    --bg-color-border: rgb(178, 108, 190);
-  }
-  &:nth-of-type(5n + 2) {
-    --bg-color-border: rgb(79, 164, 61);
-  }
-  &:nth-of-type(5n + 3) {
-    --bg-color-border: rgb(246, 170, 23);
-  }
-  &:nth-of-type(5n + 4) {
-    --bg-color-border: rgb(218, 93, 83);
-  }
-  &:nth-of-type(5n + 5) {
-    --bg-color-border: rgb(23, 162, 184);
-  }
-
-  &:hover,
-  &:focus {
-    /*--bg-size: 1rem;*/
-    --bg-color-main: #f5f5f5;
-
-    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);
-    color: #666;
-    text-decoration: none;
-    /*transform: scale(1.03) translateY(-3px);*/
-  }
-
-  @media screen and (min-width: 48rem) {
-    font-size: 1.2rem;
-  }
+	--bg-color-border: black;
+	--bg-color-main: white;
+	--bg-size: 0.75rem;
+	--card-color: rgb(0, 0, 0);
+
+	align-items: stretch;
+	background-image: linear-gradient(to right, $brand-primary, $brand-primary 0.75rem, white 0.75rem, white);
+	background-image: linear-gradient(
+		to right,
+		var(--bg-color-border),
+		var(--bg-color-border) var(--bg-size),
+		var(--bg-color-main) var(--bg-size),
+		var(--bg-color-main)
+	);
+	border-radius: 0.25rem;
+	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);
+	color: #666;
+	cursor: pointer;
+	display: flex;
+	font-family: "Variable Bahnschrift", "Bahnschrift", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: 1rem;
+	min-height: 10rem;
+	overflow: hidden;
+	transition: all ease-in-out 300ms;
+
+	&:nth-of-type(5n + 1) {
+		--bg-color-border: rgb(178, 108, 190);
+	}
+	&:nth-of-type(5n + 2) {
+		--bg-color-border: rgb(79, 164, 61);
+	}
+	&:nth-of-type(5n + 3) {
+		--bg-color-border: rgb(246, 170, 23);
+	}
+	&:nth-of-type(5n + 4) {
+		--bg-color-border: rgb(218, 93, 83);
+	}
+	&:nth-of-type(5n + 5) {
+		--bg-color-border: rgb(23, 162, 184);
+	}
+
+	&:hover,
+	&:focus {
+		/*--bg-size: 1rem;*/
+		--bg-color-main: #f5f5f5;
+
+		box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);
+		color: #666;
+		text-decoration: none;
+		/*transform: scale(1.03) translateY(-3px);*/
+	}
+
+	@media screen and (min-width: 48rem) {
+		font-size: 1.2rem;
+	}
 }
 
 .ObColorCard-column {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  justify-content: space-between;
-  margin: 1rem 0;
-  overflow: hidden;
-  padding: 0.5rem 1.5rem 0.5rem 1rem;
-  text-overflow: ellipsis;
-
-  &:first-child {
-    margin-left: 0.75rem;
-    margin-left: var(--bg-size);
-  }
-
-  &.ObColorCard-minor {
-    border-right: 1px solid #e3e3e3;
-    flex: 0 0 4rem;
-    transition: margin ease-in-out 300ms;
-  }
-
-  @media screen and (min-width: 48rem) {
-    &.ObColorCard-minor {
-      flex: 0 0 8rem;
-    }
-  }
+	display: flex;
+	flex: 1 1 100%;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: 1rem 0;
+	overflow: hidden;
+	padding: 0.5rem 1.5rem 0.5rem 1rem;
+	text-overflow: ellipsis;
+
+	&:first-child {
+		margin-left: 0.75rem;
+		margin-left: var(--bg-size);
+	}
+
+	&.ObColorCard-minor {
+		border-right: 1px solid #e3e3e3;
+		flex: 0 0 4rem;
+		transition: margin ease-in-out 300ms;
+	}
+
+	@media screen and (min-width: 48rem) {
+		&.ObColorCard-minor {
+			flex: 0 0 8rem;
+		}
+	}
 }
 
 .ObColorCard-detailLabel {
-  color: #ccc;
-  font-size: 0.8rem;
-  text-transform: uppercase;
+	color: #ccc;
+	font-size: 0.8rem;
+	text-transform: uppercase;
 }
 
 .ObColorCard-detail {
-  &:not(:last-child) {
-    margin-right: 1.5rem;
-  }
-
-  &.ObColorCard-primary,
-  &.ObColorCard-primary .ObColorCard-detailValue {
-    font-size: 1.25rem;
-    font-weight: 300;
-  }
-
-  &.ObColorCard-primary .ObColorCard-detailValue {
-    color: unset;
-  }
-
-  @media screen and (min-width: 48rem) {
-    font-size: 1rem;
-  }
+	&:not(:last-child) {
+		margin-right: 1.5rem;
+	}
+
+	&.ObColorCard-primary,
+	&.ObColorCard-primary .ObColorCard-detailValue {
+		font-size: 1.25rem;
+		font-weight: 300;
+	}
+
+	&.ObColorCard-primary .ObColorCard-detailValue {
+		color: unset;
+	}
+
+	@media screen and (min-width: 48rem) {
+		font-size: 1rem;
+	}
 }
 
 .ObColorCard-detailValue {
-  color: #999;
+	color: #999;
 }
 
 .ObColorCard-label {
-  position: relative;
-  padding-left: 1.5rem;
-  /* white-space: nowrap; */
-
-  &:not(:last-child) {
-    margin-bottom: 1rem;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 0.2rem;
-      height: calc(100% + 1rem);
-      border-left: 0.2rem dotted #666;
-      left: 0.25rem;
-      top: 0.5rem;
-      z-index: 0;
-    }
-  }
-
-  &::before {
-    background: white;
-    border: 0.2rem solid $brand-primary;
-    border: 0.2rem solid var(--bg-color-border);
-    border-radius: 50%;
-    content: "";
-    display: block;
-    height: 0.75rem;
-    left: 0;
-    position: absolute;
-    top: 0.3rem;
-    width: 0.75rem;
-    z-index: 1;
-  }
+	position: relative;
+	padding-left: 1.5rem;
+	/* white-space: nowrap; */
+
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+
+		&::after {
+			content: "";
+			position: absolute;
+			width: 0.2rem;
+			height: calc(100% + 1rem);
+			border-left: 0.2rem dotted #666;
+			left: 0.25rem;
+			top: 0.5rem;
+			z-index: 0;
+		}
+	}
+
+	&::before {
+		background: white;
+		border: 0.2rem solid $brand-primary;
+		border: 0.2rem solid var(--bg-color-border);
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: 0.75rem;
+		left: 0;
+		position: absolute;
+		top: 0.3rem;
+		width: 0.75rem;
+		z-index: 1;
+	}
 }

package/src/ColorCard/index.tsx

@@ -3,56 +3,56 @@ import "./index.scss";
 import clsx from "clsx";
 
 export function ColorCard({
-  as: Component,
-  children,
-  className,
-  href,
-  ...other
+	as: Component,
+	children,
+	className,
+	href,
+	...other
 }: Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "children"> & {
-  as?: "a" | "div" | "button" | "span" | "section" | "article";
-  href?: string;
+	as?: "a" | "div" | "button" | "span" | "section" | "article";
+	href?: string;
 }) {
-  const BaseElement = Component ? Component : href ? "a" : "div";
+	const BaseElement = Component ? Component : href ? "a" : "div";
 
-  return (
-    <BaseElement className={clsx("ObColorCard-root", className)} href={href} {...other}>
-      {children}
-    </BaseElement>
-  );
+	return (
+		<BaseElement className={clsx("ObColorCard-root", className)} href={href} {...other}>
+			{children}
+		</BaseElement>
+	);
 }
 
 export function CardColumn({
-  children,
-  className,
-  minor,
-  ...other
+	children,
+	className,
+	minor,
+	...other
 }: React.HTMLAttributes<HTMLDivElement> & { minor?: boolean }) {
-  return (
-    <div className={clsx("ObColorCard-column", minor && "ObColorCard-minor", className)} {...other}>
-      {children}
-    </div>
-  );
+	return (
+		<div className={clsx("ObColorCard-column", minor && "ObColorCard-minor", className)} {...other}>
+			{children}
+		</div>
+	);
 }
 
 export function CardDetail({
-  children,
-  className,
-  label,
-  primary,
-  ...other
+	children,
+	className,
+	label,
+	primary,
+	...other
 }: React.HTMLAttributes<HTMLDivElement> & { label?: React.ReactNode; primary?: boolean }) {
-  return (
-    <div className={clsx("ObColorCard-detail", primary && "ObColorCard-primary", className)} {...other}>
-      {label && <div className="ObColorCard-detailLabel">{label}</div>}
-      <div className="ObColorCard-detailValue">{children}</div>
-    </div>
-  );
+	return (
+		<div className={clsx("ObColorCard-detail", primary && "ObColorCard-primary", className)} {...other}>
+			{label && <div className="ObColorCard-detailLabel">{label}</div>}
+			<div className="ObColorCard-detailValue">{children}</div>
+		</div>
+	);
 }
 
 export function CardLabel({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className={clsx("ObColorCard-label", className)} {...other}>
-      {children}
-    </div>
-  );
+	return (
+		<div className={clsx("ObColorCard-label", className)} {...other}>
+			{children}
+		</div>
+	);
 }

package/src/DateNavigator/index.scss

@@ -3,58 +3,58 @@
 $date-select-height: 3rem;
 
 .ObDateNavigator-icon {
-  display: inline-block;
+	display: inline-block;
 
-  svg {
-    width: 0.625em;
-    position: relative;
-    top: -1px;
-  }
+	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;
+	background-color: hsl(220, 20%, 96%);
+	background-color: var(--block-header-color-bg);
+	display: flex;
+	font-size: 1rem;
 }
 
 .ObDateNavigator-arrow {
-  @include btn-reset;
-  display: flex;
-  align-items: center;
-  flex: 0 0 $date-select-height;
-  justify-content: center;
+	@include btn-reset;
+	display: flex;
+	align-items: center;
+	flex: 0 0 $date-select-height;
+	justify-content: center;
 
-  height: $date-select-height;
+	height: $date-select-height;
 
-  cursor: pointer;
-  text-align: center;
+	cursor: pointer;
+	text-align: center;
 
-  &:hover {
-    background-color: #e3e3e3;
-    background-color: var(--block-header-button-hover);
-  }
+	&:hover {
+		background-color: #e3e3e3;
+		background-color: var(--block-header-button-hover);
+	}
 }
 
 .ObDateNavigator-arrowLeft {
-  border-right: 1px solid #dddddd;
-  order: 1;
+	border-right: 1px solid #dddddd;
+	order: 1;
 }
 
 .ObDateNavigator-arrowRight {
-  border-left: 1px solid #dddddd;
-  order: 3;
+	border-left: 1px solid #dddddd;
+	order: 3;
 }
 
 .ObDateNavigator-date {
-  display: flex;
-  flex: 1 1 100%;
-  flex-direction: column;
-  justify-content: center;
-  order: 2;
+	display: flex;
+	flex: 1 1 100%;
+	flex-direction: column;
+	justify-content: center;
+	order: 2;
 
-  height: $date-select-height;
+	height: $date-select-height;
 
-  text-align: center;
+	text-align: center;
 }

package/src/DateNavigator/index.tsx

@@ -1,52 +1,52 @@
 import "./index.scss";
 
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
 import clsx from "clsx";
 import { useState } from "react";
 
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
 function getUiCulture() {
-  return af?.userSession?.culture ?? "default";
+	return af?.userSession?.culture ?? "default";
 }
 
 function Arrow(props) {
-  const { direction, ...rest } = props;
+	const { direction, ...rest } = props;
 
-  return (
-    <button
-      className={clsx(
-        "ObDateNavigator-arrow",
-        direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
-      )}
-      {...rest}
-    >
-      <span className="ObDateNavigator-icon">
-        {direction === "left" ? (
-          <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
-            <path
-              fill="currentColor"
-              d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
-            />
-          </svg>
-        ) : (
-          <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
-            <path
-              fill="currentColor"
-              d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-            />
-          </svg>
-        )}
-      </span>
-    </button>
-  );
+	return (
+		<button
+			className={clsx(
+				"ObDateNavigator-arrow",
+				direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
+			)}
+			{...rest}
+		>
+			<span className="ObDateNavigator-icon">
+				{direction === "left" ? (
+					<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
+						<path
+							fill="currentColor"
+							d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
+						/>
+					</svg>
+				) : (
+					<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
+						<path
+							fill="currentColor"
+							d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
+						/>
+					</svg>
+				)}
+			</span>
+		</button>
+	);
 }
 
 const formatter = new Intl.DateTimeFormat(getUiCulture(), {
-  weekday: "short",
-  day: "numeric",
-  month: "short",
-  year: "numeric",
-  timeZone: "utc"
+	weekday: "short",
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: "utc",
 });
 const today = new Date();
 const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
@@ -54,39 +54,39 @@ const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()
 const oneDay = 24 * 60 * 60 * 1000;
 
 export function DateNavigator({ date: dateProp, onChange }: { date?: Date; onChange?: (date: Date) => void }) {
-  let [internalDate, setInternalDate] = useState(new Date());
-  const date = dateProp ?? internalDate;
-  const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
-  let dateValue = new Date(dateUtc);
+	let [internalDate, setInternalDate] = useState(new Date());
+	const date = dateProp ?? internalDate;
+	const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+	let dateValue = new Date(dateUtc);
 
-  let text = formatter.format(dateValue);
-  let altText;
+	let text = formatter.format(dateValue);
+	let altText;
 
-  if (todayUtc === dateUtc) {
-    altText = getLocalizedString("Today");
-  } else if (todayUtc === dateUtc + oneDay) {
-    altText = getLocalizedString("Yesterday");
-  } else if (todayUtc === dateUtc - oneDay) {
-    altText = getLocalizedString("Tomorrow");
-  }
+	if (todayUtc === dateUtc) {
+		altText = getLocalizedString("Today");
+	} else if (todayUtc === dateUtc + oneDay) {
+		altText = getLocalizedString("Yesterday");
+	} else if (todayUtc === dateUtc - oneDay) {
+		altText = getLocalizedString("Tomorrow");
+	}
 
-  if (altText) {
-    text = `${altText}, ${text}`;
-  }
+	if (altText) {
+		text = `${altText}, ${text}`;
+	}
 
-  function handleDateChanged(date: Date) {
-    if (typeof onChange === "function") {
-      onChange(date);
-    } else {
-      setInternalDate(date);
-    }
-  }
+	function handleDateChanged(date: Date) {
+		if (typeof onChange === "function") {
+			onChange(date);
+		} else {
+			setInternalDate(date);
+		}
+	}
 
-  return (
-    <div className="ObDateNavigator-root">
-      <Arrow direction="left" onClick={() => handleDateChanged(new Date(dateUtc - oneDay))} />
-      <div className="ObDateNavigator-date">{text}</div>
-      <Arrow direction="right" onClick={() => handleDateChanged(new Date(dateUtc + oneDay))} />
-    </div>
-  );
+	return (
+		<div className="ObDateNavigator-root">
+			<Arrow direction="left" onClick={() => handleDateChanged(new Date(dateUtc - oneDay))} />
+			<div className="ObDateNavigator-date">{text}</div>
+			<Arrow direction="right" onClick={() => handleDateChanged(new Date(dateUtc + oneDay))} />
+		</div>
+	);
 }