@olenbetong/synergi-react 0.6.7

package/src/Checkbox/index.tsx

@@ -0,0 +1,81 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import { HTMLAttributes, forwardRef, useEffect, useId, useRef } from "react";
+
+function Mark(props: HTMLAttributes<SVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
+      <path d="M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z" fill="currentColor" />
+    </svg>
+  );
+}
+
+export type CheckboxProps = React.RefAttributes<HTMLInputElement> &
+  Omit<React.HTMLProps<HTMLInputElement>, "value"> & {
+    className?: string;
+    id?: string;
+    title?: string;
+    value?: boolean;
+  };
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { className, disabled = false, id, onChange = () => null, title, value, ...other }: CheckboxProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const inputId = useId() + (id ?? "");
+  const input = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (typeof ref === "function") {
+      ref(input.current);
+    } else if (ref) {
+      ref.current = input.current;
+    }
+  }, []);
+
+  function handleClick() {
+    let elem = input.current;
+    if (elem) {
+      elem.focus();
+      elem.click();
+    }
+  }
+
+  function handleInputChanged(evt: any) {
+    if (!disabled) {
+      onChange(evt);
+    }
+  }
+
+  function handleKeyDown(evt: any) {
+    if (evt.nativeEvent) {
+      const { nativeEvent } = evt;
+
+      if (nativeEvent.key === " ") {
+        nativeEvent.preventDefault();
+        input.current?.click();
+      }
+    }
+  }
+
+  return (
+    <div className={clsx("ObCheckbox-root", disabled && "Ob-disabled", className)} title={title}>
+      <input
+        className="ObCheckbox-input"
+        id={inputId}
+        type="checkbox"
+        onChange={handleInputChanged}
+        checked={value}
+        disabled={disabled}
+        ref={input}
+        {...other}
+      />
+      <label htmlFor={`#${inputId}`} className="ObCheckbox-label" onKeyDown={handleKeyDown} onClick={handleClick}>
+        <div className="ObCheckbox-box">
+          <Mark className="ObCheckbox-mark" />
+        </div>
+      </label>
+    </div>
+  );
+});

package/src/ColorCard/index.scss

@@ -0,0 +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;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+.ObColorCard-detailLabel {
+  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;
+  }
+}
+
+.ObColorCard-detailValue {
+  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;
+  }
+}

package/src/ColorCard/index.tsx

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

package/src/DateNavigator/index.scss

@@ -0,0 +1,60 @@
+@import "../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;
+}
+
+.ObDateNavigator-arrow {
+  @include 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;
+}

package/src/DateNavigator/index.tsx

@@ -0,0 +1,92 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import { useState } from "react";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+function getUiCulture() {
+  return af?.userSession?.culture ?? "default";
+}
+
+function Arrow(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>
+  );
+}
+
+const formatter = new Intl.DateTimeFormat(getUiCulture(), {
+  weekday: "short",
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+  timeZone: "utc"
+});
+const today = new Date();
+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 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 (altText) {
+    text = `${altText}, ${text}`;
+  }
+
+  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>
+  );
+}

package/src/LinkedCardList/index.scss

@@ -0,0 +1,86 @@
+@import "../styles/variables";
+
+$bullet-size: 0.7em;
+$line-width: 0.2em;
+
+.ObLinkedList-root {
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.ObLinkedList-item {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.ObLinkedList-leftColumn {
+  flex: 1 1 4em;
+  font-size: 0.75em;
+  padding: 0 1em;
+  text-align: center;
+}
+
+.ObLinkedList-rightColumn {
+  flex: 1 1 100%;
+  padding: 1em 1em 1em 1.5em;
+}
+
+.ObLinkedList-line {
+  display: flex;
+  align-self: stretch;
+  flex: 0 0 $line-width;
+  background: white;
+  position: relative;
+}
+
+.ObLinkedList-bullet {
+  background: white;
+
+  border: 1px solid rgba(50, 50, 50, 0.25);
+  border-radius: 0.55em;
+  height: $bullet-size;
+  width: $bullet-size;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+
+  transform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);
+}
+
+.ObLinkedList-card {
+  background: white;
+  border: 1px solid;
+  border-color: $color-border-top $color-border-side $color-border-bottom;
+  border-radius: 0.1875em;
+  color: inherit;
+  cursor: pointer;
+  flex: 100% 1 1;
+  position: relative;
+}
+
+.ObLinkedList-card::before {
+  border-bottom: 0.5em solid transparent;
+  border-right: 1em solid white;
+  border-top: 0.5em solid transparent;
+  content: " ";
+  filter: drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));
+  height: 1em;
+  left: -1em;
+  margin-top: -0.5em;
+  position: absolute;
+  top: 50%;
+  width: 1em;
+}
+
+.ObLinkedList-card:hover {
+  background-color: $block-color-bg-hover !important;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.ObLinkedList-card:hover::before {
+  border-right-color: $block-color-bg-hover !important;
+}

package/src/LinkedCardList/index.tsx

@@ -0,0 +1,38 @@
+import "./index.scss";
+
+import clsx from "clsx";
+
+export function List({ children, className, ...other }: React.HTMLProps<HTMLUListElement>) {
+  return (
+    <ul className={clsx("ObLinkedList-root", className)} {...other}>
+      {children}
+    </ul>
+  );
+}
+
+export function ListItem({
+  children,
+  className,
+  label,
+  ...other
+}: React.HTMLProps<HTMLLIElement> & { label: React.ReactNode }) {
+  return (
+    <li className={clsx("ObLinkedList-item", className)} {...other}>
+      {label && <div className="ObLinkedList-leftColumn">{label}</div>}
+      <div className="ObLinkedList-line">
+        <div className="ObLinkedList-bullet" />
+      </div>
+      <div className="ObLinkedList-rightColumn">{children}</div>
+    </li>
+  );
+}
+
+export function Card({ as, children, className, ...other }: React.HTMLProps<HTMLDivElement> & { as?: any }) {
+  const Component = as || "div";
+
+  return (
+    <Component className={clsx("ObLinkedList-card", className)} {...other}>
+      {children}
+    </Component>
+  );
+}

package/src/PageBanner/index.scss

@@ -0,0 +1,99 @@
+@import "../styles/variables";
+
+.ObPageBanner-root {
+  background-color: $brand-primary;
+  background-color: var(--brand-dark);
+  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
+  color: white;
+
+  a {
+    color: hsl(200, 50%, 80%);
+  }
+}
+
+.ObPageBanner-inner {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  @media screen and (min-width: $screen-md) {
+    align-items: flex-start;
+    flex-direction: row;
+  }
+}
+
+.ObPageBanner-plantTitle {
+  font-size: 2rem;
+
+  @media screen and (min-width: $screen-lg) {
+    font-size: 3rem;
+  }
+}
+
+.ObPageBanner-bannerImage {
+  align-self: stretch;
+  background-color: #ddd;
+  display: inline-block;
+  height: 20vh;
+  object-fit: cover;
+  object-position: center center;
+  width: 100%;
+
+  @media screen and (min-width: $screen-sm) {
+    align-self: center;
+    margin: 0;
+    margin-right: 1rem;
+    border: 0.4rem solid white;
+    border-radius: 50%;
+    height: 150px;
+    width: 150px;
+  }
+
+  @media screen and (min-width: $screen-lg) {
+    height: 250px;
+    width: 250px;
+  }
+}
+
+.ObPageBanner-bannerTitle {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  font-size: 2rem;
+
+  @media screen and (min-width: $screen-md) {
+    margin-top: 0;
+  }
+
+  @media screen and (min-width: $screen-lg) {
+    font-size: 3rem;
+  }
+}
+
+.ObPageBanner-tabList {
+  &.sticky {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+  }
+}
+
+.ObPageBanner-tabListInner {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  white-space: nowrap;
+}
+
+.ObPageBanner-tab {
+  border-bottom: 0.25rem solid transparent;
+  display: inline-block;
+  margin-top: 0.5rem;
+  min-width: 8rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-transform: capitalize;
+
+  &.active {
+    border-color: white;
+  }
+}