@olenbetong/synergi-react 0.6.46 → 0.7.0

package/src/SplitContainer/index.scss

@@ -2,40 +2,40 @@
 Hacky solution to sass output for some reason getting a zero-width space at the beginning, which breaks the first selector
 */
 .😖 {
-  display: initial;
+	display: initial;
 }
 
 .ObSplitContainer-root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
 
-  &.horizontal {
-    flex-direction: row;
-  }
+	&.horizontal {
+		flex-direction: row;
+	}
 }
 
 .ObSplitContainer-panel {
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .ObSplitContainer-divider {
-  flex: 0 0 0.5rem;
-  background-color: transparent;
-  line-height: 0.75;
-  cursor: ns-resize;
+	flex: 0 0 0.5rem;
+	background-color: transparent;
+	line-height: 0.75;
+	cursor: ns-resize;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
-  &:focus {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
+	&:focus {
+		background-color: rgba(0, 0, 0, 0.3);
+	}
 
-  .ObSplitContainer-root.horizontal > & {
-    cursor: ew-resize;
-    writing-mode: vertical-lr;
-  }
+	.ObSplitContainer-root.horizontal > & {
+		cursor: ew-resize;
+		writing-mode: vertical-lr;
+	}
 }

package/src/SplitContainer/index.tsx

@@ -5,271 +5,271 @@ import localforage from "localforage";
 import React, { Children, forwardRef, useEffect, useRef, useState } from "react";
 
 const settingsStore = localforage.createInstance({
-  name: `AfSplitContainers.${af.userSession.login}`,
+	name: `AfSplitContainers.${af.userSession.login}`,
 });
 
 type SplitContainerSettings = {
-  layoutVersion: string | number;
-  fixedSize: number;
+	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);
-  }
+	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));
+	let settings = settingsCache[key] ?? (await settingsStore.getItem<SplitContainerSettings>(key));
 
-  if (settings && settings.layoutVersion === layoutVersion) {
-    return settings.fixedSize;
-  }
+	if (settings && settings.layoutVersion === layoutVersion) {
+		return settings.fixedSize;
+	}
 
-  return null;
+	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;
-          }
-        })
-      )
-  )
+	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;
+	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}>
-      <span>•••</span>
-    </div>
-  );
+	return (
+		<div tabIndex={0} className={clsx("ObSplitContainer-divider", props.className)} ref={ref}>
+			<span>•••</span>
+		</div>
+	);
 });
 
 type SplitRootProps = React.HTMLProps<HTMLDivElement> & {
-  className?: string;
-  children: React.ReactNode;
-  direction: "horizontal" | "vertical";
+	className?: string;
+	children: React.ReactNode;
+	direction: "horizontal" | "vertical";
 };
 
 function SplitRoot({ className, direction, ...props }: SplitRootProps) {
-  return <div className={clsx(className, "ObSplitContainer-root", direction)} {...props} />;
+	return <div className={clsx(className, "ObSplitContainer-root", direction)} {...props} />;
 }
 
 type SplitPanelProps = {
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
+	children: React.ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
 } & (
-  | {
-      fixed: true;
-      size: number;
-    }
-  | {
-      fixed: false;
-      size?: number;
-    }
+	| {
+			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>
-  );
+	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;
+	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,
+	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>
-  );
+	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

@@ -1,50 +1,50 @@
 @import "../styles/variables";
 
 .ObValueToggle-root {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .ObValueToggle-option {
-  margin-bottom: 0;
+	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);
-  }
+	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;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
 }