💄 GC-1464 Allow users to resize the sidebar in the Content Hub

lib/.specs/helpers.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it, vi } from "vitest";
+import { keepValueWithinRange, toPixels } from "../helpers";
+
+describe("helpers: toPixels", () => {
+  it("should not convert arguments of type number", () => {
+    expect(toPixels(100)).toBe(100);
+  });
+
+  it("should convert pixels to number", () => {
+    expect(toPixels(`100px`)).toBe(100);
+  });
+
+  it("should convert percentage to number", () => {
+    expect(toPixels(`100%`)).toBe(100);
+  });
+
+  it("should convert to a percentage value of the percentageOf arg", () => {
+    expect(toPixels("50%", 200)).toBe(100);
+  });
+
+  it("should return number and warning for unknown units", () => {
+    const warn = vi.spyOn(global.console, "warn");
+
+    expect(toPixels("123rem")).toBe(123);
+    expect(warn).toHaveBeenCalledOnce();
+    expect(warn).toHaveBeenCalledWith(
+      `Could not interpret a normalised value for: 123rem.\nParsing directly to integer: 123.`
+    );
+  });
+});
+
+describe("helpers: keepValueWithinRange", () => {
+  it("should return the value if there are no other arguments", () => {
+    expect(keepValueWithinRange(50)).toBe(50);
+  });
+
+  it("should return the value if it is within the range", () => {
+    expect(keepValueWithinRange(50, 33, 77)).toBe(50);
+  });
+
+  it("should return the max if the value is above the max", () => {
+    expect(keepValueWithinRange(11, 1, 10)).toBe(10);
+  });
+
+  it("should return the min if the value is below the min", () => {
+    expect(keepValueWithinRange(0, 1, 10)).toBe(1);
+  });
+});

lib/Resizable/index.tsx

@@ -0,0 +1,123 @@
+import type { PropsWithChildren } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
+import { keepValueWithinRange, toPixels } from "../helpers";
+
+export interface ResizableProps {
+  defaultWidth?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  useGutterOffset?: boolean;
+  containerWidth?: number | string;
+}
+
+/**
+ * A wrapper for making a given child element resizable
+ * @param children The element to be resized
+ * @param defaultWidth The width the child should initially render to. If min and max widths are provided, then the provided width will be massaged to meet those constraints
+ * @param maxWidth The maximum width the element can be resized to
+ * @param minWidth The minimum width the element can be resized to
+ * @param useGutterOffset Toggle whether we should take the width of the gutter into account for calculating the width of the resized item. This can be handy depending on the CSS being applied to or around the child element
+ * @param rest Contains params that need converting such as the containerWidth
+ */
+export function Resizable({
+  children,
+  defaultWidth = "50%",
+  maxWidth,
+  minWidth,
+  useGutterOffset = false,
+  ...rest
+}: PropsWithChildren<ResizableProps>) {
+  const containerWidth = toPixels(
+    rest.containerWidth ?? document.body.offsetWidth
+  );
+  const resizeRef = useRef<HTMLDivElement>(null);
+  const resizeWrapperRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLSpanElement>(null);
+  const gutterSize = useGutterOffset ? 16 : 0;
+  const min = toPixels(minWidth ?? 0, containerWidth);
+  const max = toPixels(maxWidth ?? "100%", containerWidth);
+
+  const [state, setState] = React.useState({
+    startX: 0,
+    startWidth: 0,
+  });
+
+  const getWidth = () => toPixels(resizeWrapperRef.current?.style.width || 0);
+
+  const setWidth = (value: number) => {
+    if (resizeWrapperRef.current === null) return;
+
+    resizeWrapperRef.current.style.width = `${
+      keepValueWithinRange(value, min, max) - gutterSize
+    }px`;
+  };
+
+  const doDrag = (evt: MouseEvent) => {
+    const newWidth = state.startWidth + evt.clientX - state.startX;
+    setWidth(newWidth);
+  };
+
+  const stopDrag = () => {
+    document.removeEventListener("mousemove", doDrag, false);
+    document.removeEventListener("mouseup", stopDrag, false);
+  };
+
+  const initDrag = useCallback(
+    (evt: React.DragEvent<HTMLDivElement>) => {
+      const { clientX } = evt;
+
+      const newState = {
+        ...state,
+        startX: clientX,
+        startWidth: getWidth(),
+      };
+
+      setState(newState);
+
+      document.addEventListener("mousemove", doDrag, false);
+      document.addEventListener("mouseup", stopDrag, false);
+    },
+    [setState]
+  );
+
+  const setGutterHandlePosition = (evt: React.MouseEvent<HTMLSpanElement>) => {
+    const handle = handleRef.current;
+    if (handle === null) return;
+
+    const rect = evt.currentTarget.getBoundingClientRect();
+    const gutter = handle.parentElement as HTMLSpanElement;
+    const handleOffset = handle.offsetHeight / 2;
+
+    const yPosition = keepValueWithinRange(
+      evt.clientY - rect.top,
+      handleOffset,
+      gutter.offsetHeight - handleOffset
+    );
+
+    handle.style.top = `${yPosition - handleOffset}px`;
+  };
+
+  useEffect(() => {
+    const newWidth = keepValueWithinRange(toPixels(defaultWidth), min, max);
+    setWidth(newWidth);
+
+    // remember to remove global listeners on dismount
+    return () => stopDrag();
+  }, []);
+
+  return (
+    <div ref={resizeRef} className="resizable">
+      <div ref={resizeWrapperRef} className="resizable__wrapper">
+        {children}
+        <span
+          role="none"
+          className="resizable__gutter"
+          onMouseDown={initDrag}
+          onMouseMove={setGutterHandlePosition}
+        >
+          <span ref={handleRef} className="resizable__gutter-handle" />
+        </span>
+      </div>
+    </div>
+  );
+}

lib/Resizable/styles.scss

@@ -0,0 +1,55 @@
+$gutterSize: 16px;
+$gutterColour: #006aff;
+
+.resizable {
+  position: relative;
+  display: flex;
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+  }
+
+  &__wrapper > *:first-child {
+    width: 100% !important;
+    overflow-x: hidden;
+  }
+}
+
+.resizable__gutter {
+  position: absolute;
+  user-select: none;
+  height: 100%;
+  width: $gutterSize;
+  top: 0;
+  right: -(calc($gutterSize / 2));
+  cursor: ew-resize;
+
+  &::before {
+    content: "";
+    width: 2px;
+    margin: auto;
+    background-color: $gutterColour;
+    display: block;
+    height: 100%;
+  }
+}
+
+.resizable__gutter-handle {
+  background-color: $gutterColour;
+  border-radius: 4px;
+  height: 30px;
+  margin: auto;
+  width: 8px;
+  display: flex;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.1s;
+
+  .resizable__gutter:hover & {
+    opacity: 1;
+  }
+}

lib/helpers.ts

@@ -1,16 +1,49 @@
-export const pluralisePerson = (count: any) => count === 1 ? `${count} person` : `${count} people`;
+export const pluralisePerson = (count: any) =>
+  count === 1 ? `${count} person` : `${count} people`;
 
-export const pluraliseHas = (count: any) => count === 1 ? 'has' : 'have';
+export const pluraliseHas = (count: any) => (count === 1 ? "has" : "have");
 
 export const filterUsers = (users: any, term: any, searchByEmail = false) => {
   const safeTerm = term.toLowerCase();
   return users.filter(
-    (user: any) => user.name
-      .toLowerCase()
-      .split(' ')
-      .filter((subStr: any) => subStr.lastIndexOf(safeTerm, 0) === 0).length > 0 ||
-    user.name.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
-    user.display.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
-    (searchByEmail && user.email.toLowerCase().lastIndexOf(safeTerm, 0) === 0)
+    (user: any) =>
+      user.name
+        .toLowerCase()
+        .split(" ")
+        .filter((subStr: any) => subStr.lastIndexOf(safeTerm, 0) === 0).length >
+        0 ||
+      user.name.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
+      user.display.toLowerCase().lastIndexOf(safeTerm, 0) === 0 ||
+      (searchByEmail && user.email.toLowerCase().lastIndexOf(safeTerm, 0) === 0)
   );
 };
+
+export const toPixels = (value: string | number, percentageOf = 100) => {
+  if (typeof value === "number") return value;
+
+  const integer = parseInt(value, 10);
+
+  if (value.endsWith("px")) {
+    return integer;
+  }
+
+  if (value.endsWith("%")) {
+    return (percentageOf / 100) * integer;
+  }
+
+  console.warn(
+    `Could not interpret a normalised value for: ${value}.\nParsing directly to integer: ${integer}.`
+  );
+  return integer;
+};
+
+export const keepValueWithinRange = (
+  start: number,
+  min?: number,
+  max?: number
+) => {
+  let value = start;
+  if (typeof max === "number") value = Math.min(value, max);
+  if (typeof min === "number") value = Math.max(value, min);
+  return value;
+};

lib/index.ts

@@ -23,6 +23,7 @@ export { NotificationInlineWarning } from "./Notification/inline/NotificationInl
 export { Dropdown } from "./Dropdown";
 export { DropdownMenu } from "./DropdownMenu";
 export { ProgressButton } from "./ProgressButton";
+export { Resizable } from "./Resizable";
 export { Progress } from "./Progress";
 export { SearchInput } from "./SearchInput";
 export { Modal } from "./Modal";