@olenbetong/synergi-react 0.6.7

package/src/SplitContainer/index.tsx

@@ -0,0 +1,271 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import localforage from "localforage";
+import React, { Children, forwardRef, useEffect, useRef, useState } from "react";
+
+const settingsStore = localforage.createInstance({
+  name: `AfSplitContainers.${af.userSession.login}`,
+});
+
+type SplitContainerSettings = {
+  layoutVersion: string | number;
+  fixedSize: number;
+};
+
+const settingsCache: Record<string, SplitContainerSettings> = {};
+
+async function persistState(key: string, layoutVersion: string | number, fixedSize: number | null | undefined) {
+  if (fixedSize != null) {
+    let settings = {
+      layoutVersion,
+      fixedSize,
+    };
+
+    settingsCache[key] = settings;
+    await settingsStore.setItem<SplitContainerSettings>(key, settings);
+  }
+}
+
+async function getSettings(key: string, layoutVersion: string | number): Promise<number | null> {
+  let settings = settingsCache[key] ?? (await settingsStore.getItem<SplitContainerSettings>(key));
+
+  if (settings && settings.layoutVersion === layoutVersion) {
+    return settings.fixedSize;
+  }
+
+  return null;
+}
+
+// Load all article grid layouts even if the grid is not mounted yet.
+// This ways the persisted state can be restored faster after the initial
+// page load.
+settingsStore.keys().then((keys) =>
+  Promise.allSettled(
+    keys
+      .filter((key) => key.startsWith(af.article.id))
+      .map((key) =>
+        settingsStore.getItem<SplitContainerSettings>(key).then((settings) => {
+          if (settings && !settingsCache[key]) {
+            settingsCache[key] = settings;
+          }
+        })
+      )
+  )
+);
+
+type DividerProps = {
+  className?: string;
+  direction: "horizontal" | "vertical";
+  isDragging: boolean;
+};
+
+const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props: DividerProps, ref) {
+  return <div tabIndex={0} className={clsx("ObSplitContainer-divider", props.className)} ref={ref} />;
+});
+
+type SplitRootProps = React.HTMLProps<HTMLDivElement> & {
+  className?: string;
+  children: React.ReactNode;
+  direction: "horizontal" | "vertical";
+};
+
+function SplitRoot({ className, direction, ...props }: SplitRootProps) {
+  return <div className={clsx(className, "ObSplitContainer-root", direction)} {...props} />;
+}
+
+type SplitPanelProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+} & (
+  | {
+      fixed: true;
+      size: number;
+    }
+  | {
+      fixed: false;
+      size?: number;
+    }
+);
+
+function SplitPanel(props: SplitPanelProps) {
+  let style = {
+    flex: props.fixed ? `0 0 ${Math.floor(props.size)}px` : "1 1 100%",
+    ...props.style,
+  };
+
+  return (
+    <div className={clsx(props.className, "ObSplitContainer-panel")} style={style}>
+      {props.children}
+    </div>
+  );
+}
+
+export type SplitContainerProps = {
+  className?: string;
+  panelClassName?: string;
+  children: React.ReactNode[];
+  direction?: "horizontal" | "vertical";
+  fixedPanel?: 1 | 2;
+  defaultFixedSize?: number;
+  /**
+   * When the fixed size is persisted, changing the layoutVersion will force clients
+   * to reset to the default value.
+   */
+  layoutVersion?: string | number;
+  /**
+   * If you set an id, the fixed size will be persisted, and restored after page load
+   */
+  id?: string;
+};
+
+export function SplitContainer({
+  className,
+  children,
+  direction = "vertical",
+  fixedPanel = 1,
+  panelClassName,
+  defaultFixedSize = 400,
+  layoutVersion = 1,
+  id,
+}: SplitContainerProps) {
+  let [fixedSize, setFixedSize] = useState<number>(defaultFixedSize);
+  let [isDragging, setIsDragging] = useState(false);
+  let dividerRef = useRef<HTMLDivElement>(null);
+
+  if (Children.count(children) !== 2) {
+    throw Error("SplitContainer requires exactly 2 children");
+  }
+
+  function handleFixedSizeChanged(size: React.SetStateAction<number>) {
+    setFixedSize((current) => {
+      let newValue: number = typeof size === "function" ? size(current) : size;
+
+      if (id) {
+        let key = `${af.article.id}.${id}`;
+        persistState(key, layoutVersion, newValue);
+      }
+
+      return newValue;
+    });
+  }
+
+  useEffect(() => {
+    if (id) {
+      let key = `${af.article.id}.${id}`;
+  
+      getSettings(key, layoutVersion).then((data: number | null) => {
+        if (data) {
+          // Persisted state exists, and matches the current layout version,
+          // so restore the state.
+          setFixedSize(data);
+  
+          return Promise.resolve();
+        }
+      });
+    }
+  }, [id, layoutVersion]);
+
+  let childrenArray = Children.toArray(children);
+
+  useEffect(() => {
+    let divider = dividerRef.current;
+    if (divider) {
+      let initialPosition: { clientX: number; clientY: number; size: number } = {
+        clientX: 0,
+        clientY: 0,
+        size: 0,
+      };
+      let movingPanel: HTMLElement = (
+        fixedPanel === 1 ? divider.previousElementSibling : divider.nextElementSibling
+      ) as HTMLElement;
+
+      function getNewSize(event: PointerEvent) {
+        let deltaSize =
+          direction === "horizontal"
+            ? event.clientX - initialPosition.clientX
+            : event.clientY - initialPosition.clientY;
+
+        deltaSize *= fixedPanel === 1 ? -1 : 1;
+
+        return initialPosition.size - deltaSize;
+      }
+
+      function handlePointerUp(event: PointerEvent) {
+        let newSize = getNewSize(event);
+        handleFixedSizeChanged(newSize);
+        setIsDragging(false);
+
+        movingPanel.style.flex = `0 0 ${Math.floor(newSize)}px`;
+        window.removeEventListener("pointermove", handlePointerMove);
+      }
+
+      function handlePointerMove(event: PointerEvent) {
+        event.preventDefault();
+
+        let newSize = getNewSize(event);
+        movingPanel.style.flex = `0 0 ${newSize}px`;
+      }
+
+      function handlePointerDown(event: PointerEvent) {
+        setIsDragging(true);
+
+        let rect = movingPanel.getBoundingClientRect();
+        let size = direction === "horizontal" ? rect.width : rect.height;
+        initialPosition = {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          size,
+        };
+
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp, { once: true });
+      }
+
+      function handleKeyDown(event: KeyboardEvent) {
+        let reduce: boolean = true;
+        let shouldHandle: boolean = false;
+        if (!event.altKey && !event.ctrlKey && !event.metaKey) {
+          if (direction === "horizontal" && ["ArrowLeft", "ArrowRight"].includes(event.key)) {
+            shouldHandle = true;
+            reduce =
+              (fixedPanel === 1 && event.key === "ArrowLeft") || (fixedPanel === 2 && event.key === "ArrowRight");
+          } else if (direction === "vertical" && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+            shouldHandle = true;
+            reduce = (fixedPanel === 1 && event.key === "ArrowUp") || (fixedPanel === 2 && event.key === "ArrowDown");
+          }
+        }
+
+        if (shouldHandle) {
+          event.preventDefault();
+          event.stopPropagation();
+
+          let delta = event.shiftKey ? 25 : 5;
+
+          handleFixedSizeChanged((size) => size + (reduce ? -delta : delta));
+        }
+      }
+
+      divider.addEventListener("pointerdown", handlePointerDown);
+      divider.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        divider?.removeEventListener("pointerdown", handlePointerDown);
+        divider?.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [direction, fixedPanel]);
+
+  return (
+    <SplitRoot direction={direction} className={className}>
+      <SplitPanel className={panelClassName} fixed={fixedPanel === 1} size={fixedSize}>
+        {childrenArray[0]}
+      </SplitPanel>
+      <Divider ref={dividerRef} direction={direction} isDragging={isDragging} />
+      <SplitPanel className={panelClassName} fixed={fixedPanel === 2} size={fixedSize}>
+        {childrenArray[1]}
+      </SplitPanel>
+    </SplitRoot>
+  );
+}

package/src/ValueToggle/index.scss

@@ -0,0 +1,50 @@
+@import "../styles/variables";
+
+.ObValueToggle-root {
+  display: flex;
+  align-items: center;
+}
+
+.ObValueToggle-option {
+  margin-bottom: 0;
+}
+
+.ObValueToggle-label {
+  cursor: pointer;
+  font-size: 0.8em;
+  margin: 0 0.2em;
+  padding: 0.3em 0.5em;
+  text-transform: uppercase;
+
+  &:hover {
+    background: #ccc;
+  }
+
+  .ObValueToggle-input:checked + & {
+    --color-bg: var(--brand-dark);
+    background-color: #666;
+    background-color: var(--color-bg);
+    cursor: default;
+    color: white;
+  }
+
+  .ObValueToggle-input:checked:focus-within + & {
+    --color-bg: var(--brand-light);
+  }
+
+  .ObValueToggle-input:checked:hover + & {
+    background-color: #666;
+    background-color: var(--color-bg);
+  }
+}
+
+.ObValueToggle-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/src/ValueToggle/index.tsx

@@ -0,0 +1,75 @@
+import "./index.scss";
+
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+
+let valueToggleId = 0;
+
+export type ValueToggleProps = {
+  className?: string;
+  onChange?: (value: string | number) => void;
+  value?: string | number;
+  defaultValue?: string | number;
+  id?: string;
+  options: Array<string | { value: string | number; label?: string }>;
+  style?: React.CSSProperties;
+};
+
+function ValueToggleInner(
+  { className, onChange, defaultValue, options, value, ...other }: ValueToggleProps,
+  ref: React.ForwardedRef<{
+    focus: () => void;
+    blur: () => void;
+    value: string | number;
+  }>
+) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
+  const isControlled = value !== undefined;
+
+  useImperativeHandle(ref, () => {
+    const e = wrapperRef.current?.querySelector("input");
+
+    return {
+      focus: () => e?.focus(),
+      blur: () => e?.blur(),
+      value: (e?.querySelector("input:checked") as HTMLInputElement).value,
+    };
+  });
+
+  return (
+    <fieldset className={className} {...other}>
+      <div className="ObValueToggle-root" ref={wrapperRef}>
+        {options.map((option) => {
+          const isObj = typeof option === "object";
+          const optValue = isObj ? option.value : option;
+          const props: React.HTMLProps<HTMLInputElement> = {
+            value: optValue,
+          };
+
+          if (isControlled) {
+            props.checked = value === optValue;
+          } else {
+            props.defaultChecked = defaultValue === optValue;
+          }
+
+          if (typeof onChange === "function") {
+            props.onChange = () => onChange(optValue);
+          }
+
+          if (isObj) {
+            Object.assign(props, option);
+          }
+
+          return (
+            <label key={optValue} className="ObValueToggle-option">
+              <input type="radio" className="ObValueToggle-input" name={toggleName} {...props} />
+              <span className="ObValueToggle-label">{isObj ? option.label || optValue : optValue}</span>
+            </label>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}
+
+export const ValueToggle = forwardRef(ValueToggleInner);

package/src/global.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="@olenbetong/appframe-core" />
+/// <reference path="@olenbetong/appframe-data" />

package/src/index.scss

@@ -0,0 +1,9 @@
+@import "./Checkbox/index.scss";
+@import "./ColorCard/index.scss";
+@import "./DateNavigator/index.scss";
+@import "./LinkedCardList/index.scss";
+@import "./PageBanner/index.scss";
+@import "./ProgressBar/index.scss";
+@import "./Sidebar/index.scss";
+@import "./SplitContainer/index.scss";
+@import "./ValueToggle/index.scss";

package/src/index.ts

@@ -0,0 +1,27 @@
+export { Checkbox, CheckboxProps } from "./Checkbox/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { DateNavigator } from "./DateNavigator/index.js";
+export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
+export {
+  BannerImage as PageBannerImage,
+  BannerImageProps,
+  PageBanner,
+  PageBannerProps,
+  Tab as PageBannerTab,
+  TabProps as PageBannerTabProps,
+  TabList as PageBannerTabList,
+  TabListProps as PageBannerTabListProps,
+  Title as PageBannerTitle,
+  TitleProps as PageBannerTitleProps,
+} from "./PageBanner/index.js";
+export { Portal } from "./Portal/index.js";
+export { ProgressBar } from "./ProgressBar/index.js";
+export { Sidebar, SidebarProps } from "./Sidebar/index.js";
+export { Spinner, SpinnerProps } from "./Spinner/index.js";
+export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
+
+export { useTranslation } from "./useTranslation/index.js";
+export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
+export { useDebounce } from "../../appframe-react/src/useDebounce.js";
+export { usePersistedSetting } from "./usePersistedSetting.js";
+export { useSearchParamState } from "./useSearchParamState.js";

package/src/styles/_mixins.scss

@@ -0,0 +1,19 @@
+@mixin btn-reset {
+  background: none;
+  border: 0;
+  color: inherit;
+  /* cursor: default; */
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-appearance: button; /* for input */
+  -webkit-user-select: none; /* for button */
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,70 @@
+$brand-primary: hsl(186, 72%, 24%);
+$brand-light: hsl(186, 72%, 37%);
+$brand-dark: hsl(186, 74%, 20%);
+$brand-tertiary: rgb(68, 69, 84);
+
+$link-color: $brand-primary;
+$link-color-hover: $brand-dark;
+
+$line-height: 1.4;
+
+$color-bg-hover: hsla(186, 72%, 37%, 0.6);
+$color-bg-active: hsla(95, 49%, 71%, 0.2);
+$color-fg-active: black;
+
+$color-border-top: #e5e6e9;
+$color-border-side: #dfe0e4;
+$color-border-bottom: #d0d1d5;
+
+$navbar-height: 40px;
+
+$screen-xs: 0;
+$screen-sm: 576px;
+$screen-md: 768px;
+$screen-lg: 992px;
+$screen-xl: 1200px;
+
+$block-header-color-bg: hsl(220, 20%, 96%);
+$block-header-color-bg-hover: hsl(220, 20%, 92%);
+$block-header-color-fg: hsl(0, 0%, 20%);
+$block-color-bg-alt: hsl(220, 20%, 98%);
+$block-color-bg-hover: hsl(220, 20%, 94%);
+$block-color-border: #e5e5e5;
+
+$block-header-button-hover: hsl(220, 20%, 92%);
+$block-header-button-border: hsl(220, 7%, 82%);
+$block-header-button-active: hsl(220, 20%, 86%);
+
+$sidebar-padding: 0.9375rem;
+$sidebar-width: 18rem;
+$sidebar-fg-color: hsl(0, 0%, 90%);
+$sidebar-bg-color: hsl(186, 74%, 13%);
+$sidebar-header-color: hsl(220, 6%, 70%);
+$sidebar-link-fg-color: white;
+$sidebar-link-fg-active: white;
+$sidebar-link-bg-color: transparent;
+$sidebar-link-bg-hover: hsla(0, 0%, 100%, 0.1);
+$sidebar-link-bg-active: hsl(142, 13%, 13%);
+
+$padding-xs: 0.75rem;
+$padding-sm: 0.9375rem;
+$padding-lg: 1.5rem;
+
+$grid-gutter-width: 30px;
+
+$container-tablet: (720px + $grid-gutter-width);
+$container-sm: $container-tablet;
+$container-desktop: (940px + $grid-gutter-width);
+$container-md: $container-desktop;
+$container-large-desktop: (1140px + $grid-gutter-width);
+$container-lg: $container-large-desktop;
+
+$toolbar-background: linear-gradient(#fefefe, #fafafa); //white;
+$toolbar-height: 3.125rem;
+$toolbar-border-color: #dedede;
+$toolbar-border-width: 1px;
+
+$toolbar-btn-color: hsla(0, 0%, 60%, 0.8);
+$toolbar-btn-hover-color: hsla(0, 0%, 40%, 0.8);
+$toolbar-btn-bg: transparent;
+$toolbar-btn-hover-bg: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 87%));

package/src/useDebounce.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Returns a debounced version of the given value.
+ * 
+ * @param value 
+ * @param delay 
+ * @returns 
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export function useDebounce<T>(value: T, delay = 300) {
+  let [debouncedValue, setValue] = useState(value);
+
+  useEffect(() => {
+    let timeout = setTimeout(() => setValue(value), delay);
+
+    return () => clearTimeout(timeout);
+  }, [delay, value]);
+
+  return debouncedValue;
+}

package/src/usePersistedSetting.ts

@@ -0,0 +1,78 @@
+import mitt, { Emitter, Handler } from "mitt";
+import localforage from "localforage";
+import { useSyncExternalStore } from "react";
+
+const settingsStore = localforage.createInstance({
+  name: `AfUserSettings.${af.userSession.login}`,
+});
+
+class SettingsCache {
+  #mitt: Emitter<{ change: { key: string; value: unknown } }>;
+  #cache: Record<string, unknown> = {};
+
+  constructor() {
+    this.#mitt = mitt();
+    // Load all article user settings even if the setting is not needed yet.
+    // This ways the persisted state can be restored faster after the initial
+    // page load.'
+    settingsStore.keys().then((keys) =>
+      Promise.allSettled(
+        keys
+          .filter((key) => key.startsWith(af.article.id))
+          .map((storeKey) =>
+            settingsStore.getItem(storeKey).then((storedValue) => {
+              let key = storeKey.replace(`${af.article.id}.`, "");
+
+              if (storedValue !== undefined && this.#cache[key] === undefined) {
+                this.setItem(key, storedValue);
+              }
+            })
+          )
+      )
+    );
+  }
+
+  setItem(key: string, value: unknown) {
+    this.#cache[key] = value;
+    this.#mitt.emit("change", { key, value });
+
+    let storeKey = `${af.article.id}.${key}`;
+    settingsStore.setItem(storeKey, value);
+  }
+
+  getItem(key: string): unknown {
+    return this.#cache[key];
+  }
+
+  listen(setting: string, callback: Handler<unknown>) {
+    function handler({ key, value }: { key: string; value: unknown }) {
+      if (setting === key) {
+        callback(value);
+      }
+    }
+
+    this.#mitt.on("change", handler);
+
+    return () => this.#mitt.off("change", handler);
+  }
+}
+
+const settingsCache = new SettingsCache();
+
+/**
+ * On mount, load the persisted state from Indexed DB, and if the persisted
+ * layout version matches, restore the layout. Then listen to changes to the
+ * state, and store the latest version in Indexed DB.
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export function usePersistedSetting<T = unknown>(
+  key: string,
+  defaultValue: T
+): [T, (newValue: T) => void] {
+  let value = useSyncExternalStore(
+    (onChange) => settingsCache.listen(key, () => onChange()),
+    () => (settingsCache.getItem(key) as T) ?? defaultValue
+  );
+
+  return [value, (newValue: T) => settingsCache.setItem(key, newValue)];
+}