@simplybusiness/mobius 3.0.0

package/src/hooks/useBreakpoint/useBreakpoint.test.tsx

@@ -0,0 +1,283 @@
+import { render, screen, renderHook } from "@testing-library/react";
+import { useBreakpoint, DEFAULT_BREAKPOINT } from ".";
+import { ThemeContext, BreakpointsType } from "../../contexts/ThemeContext";
+
+const TestComponent = () => {
+  const { breakpoint } = useBreakpoint();
+
+  return <div>{breakpoint.size}</div>;
+};
+
+describe("useBreakpoint", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  const setWindowWidth = (value: number) => {
+    window.innerWidth = value;
+    window.dispatchEvent(new Event("resize"));
+  };
+
+  describe("given no breakpoints are provided through ThemeContext", () => {
+    it("returns default breakpoint", () => {
+      render(<TestComponent />);
+
+      expect(screen.getByText(DEFAULT_BREAKPOINT.size)).toBeInTheDocument();
+    });
+  });
+
+  describe("given a set of breakpoints provided through ThemeContext", () => {
+    const breakpoints: BreakpointsType = [
+      { size: "xs", value: 320 },
+      { size: "sm", value: 540 },
+      { size: "md", value: 720 },
+      { size: "lg", value: 960 },
+      { size: "xl", value: 1140 },
+      { size: "xxl", value: 1320 },
+    ];
+
+    const expected = [
+      ["xs", 300],
+      ["xs", 320],
+      ["xs", 400],
+      ["sm", 540],
+      ["sm", 600],
+      ["md", 720],
+      ["md", 800],
+      ["lg", 960],
+      ["lg", 1000],
+      ["xl", 1140],
+      ["xl", 1200],
+      ["xxl", 1320],
+      ["xxl", 1400],
+    ];
+
+    it.each(expected)(
+      "it returns breakpoint %s for window width %s",
+      (breakpoint, value) => {
+        setWindowWidth(value as number);
+
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        const providerValue = {
+          breakpoints,
+          setBreakpoints: () => {},
+        };
+
+        render(
+          <ThemeContext.Provider value={providerValue}>
+            <TestComponent />
+          </ThemeContext.Provider>,
+        );
+
+        expect(screen.getByText(breakpoint)).toBeInTheDocument();
+      },
+    );
+  });
+
+  describe("up", () => {
+    const breakpoints: BreakpointsType = [
+      { size: "xs", value: 320 },
+      { size: "sm", value: 540 },
+      { size: "md", value: 720 },
+      { size: "lg", value: 960 },
+      { size: "xl", value: 1140 },
+      { size: "xxl", value: 1320 },
+    ];
+
+    const table = [
+      [
+        300,
+        [
+          [true, "xs"],
+          [false, "sm"],
+          [false, "md"],
+          [false, "lg"],
+          [false, "xl"],
+          [false, "xxl"],
+        ],
+      ],
+      [
+        600,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [false, "md"],
+          [false, "lg"],
+          [false, "xl"],
+          [false, "xxl"],
+        ],
+      ],
+      [
+        800,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [false, "lg"],
+          [false, "xl"],
+          [false, "xxl"],
+        ],
+      ],
+      [
+        1000,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [false, "xl"],
+          [false, "xxl"],
+        ],
+      ],
+      [
+        1200,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [false, "xxl"],
+        ],
+      ],
+      [
+        1400,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+    ] as const;
+
+    describe.each(table)("given window width %s", (value, expected) => {
+      it.each(expected)(
+        "it returns %s for breakpoint %s",
+        (expectedResult, breakpoint) => {
+          setWindowWidth(value as number);
+
+          const providerValue = {
+            breakpoints,
+            setBreakpoints: () => {},
+          };
+
+          const wrapper = ({ children }: any) => (
+            <ThemeContext.Provider value={providerValue}>
+              {children}
+            </ThemeContext.Provider>
+          );
+          const { result } = renderHook(() => useBreakpoint(), { wrapper });
+          expect(result.current.up(breakpoint)).toBe(expectedResult);
+        },
+      );
+    });
+  });
+
+  describe("down", () => {
+    const breakpoints: BreakpointsType = [
+      { size: "xs", value: 320 },
+      { size: "sm", value: 540 },
+      { size: "md", value: 720 },
+      { size: "lg", value: 960 },
+      { size: "xl", value: 1140 },
+      { size: "xxl", value: 1320 },
+    ];
+
+    const table = [
+      [
+        300,
+        [
+          [true, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+      [
+        600,
+        [
+          [false, "xs"],
+          [true, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+      [
+        800,
+        [
+          [false, "xs"],
+          [false, "sm"],
+          [true, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+      [
+        1000,
+        [
+          [false, "xs"],
+          [false, "sm"],
+          [false, "md"],
+          [true, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+      [
+        1200,
+        [
+          [false, "xs"],
+          [false, "sm"],
+          [false, "md"],
+          [false, "lg"],
+          [true, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+      [
+        1400,
+        [
+          [false, "xs"],
+          [false, "sm"],
+          [false, "md"],
+          [false, "lg"],
+          [false, "xl"],
+          [true, "xxl"],
+        ],
+      ],
+    ] as const;
+
+    describe.each(table)("given window width %s", (value, expected) => {
+      it.each(expected)(
+        "it returns %s for breakpoint %s",
+        (expectedResult, breakpoint) => {
+          setWindowWidth(value as number);
+
+          const providerValue = {
+            breakpoints,
+            setBreakpoints: () => {},
+          };
+
+          const wrapper = ({ children }: any) => (
+            <ThemeContext.Provider value={providerValue}>
+              {children}
+            </ThemeContext.Provider>
+          );
+          const { result } = renderHook(() => useBreakpoint(), { wrapper });
+          expect(result.current.down(breakpoint)).toBe(expectedResult);
+        },
+      );
+    });
+  });
+});

package/src/hooks/useBreakpoint/useBreakpoint.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState, useContext, useCallback, useMemo } from "react";
+import debounce from "lodash.debounce";
+
+import { Breakpoint, ThemeContext } from "../../contexts";
+import { SizeType } from "../../types/size";
+
+const getBreakpoint = (config: Breakpoint[], windowWidth: number) => {
+  // When breakpoint size and windowWidth are a match
+  // The addition of 1px ensures the right breakpoint
+  const closest = config.findIndex(
+    breakpoint => breakpoint.value >= windowWidth + 1,
+  );
+  const smallest = config[0];
+  const largest = config[config.length - 1];
+  const match = config[closest - 1];
+
+  if (closest === 0) return smallest;
+  if (closest === -1) return largest;
+
+  return match;
+};
+
+export type BreakpointType = {
+  breakpoint: Breakpoint;
+  up: (size: SizeType) => boolean | undefined;
+  down: (size: SizeType) => boolean | undefined;
+};
+
+export const DEFAULT_BREAKPOINT = { size: "xs", value: 0 } as Breakpoint;
+
+const useBreakpoint = (): BreakpointType => {
+  const isServerSide = typeof window === "undefined";
+  const { breakpoints } = useContext(ThemeContext);
+
+  const config = useMemo(
+    () => (Array.isArray(breakpoints) ? [...breakpoints] : []),
+    [breakpoints],
+  );
+  const [windowWidth, setWindowWidth] = useState(
+    isServerSide ? 0 : window.innerWidth,
+  );
+  const [currentBreakpoint, setCurrentBreakpoint] = useState<Breakpoint>(
+    DEFAULT_BREAKPOINT as Breakpoint,
+  );
+
+  const handleResize = () => {
+    setWindowWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    if (!windowWidth || config.length === 0) {
+      setCurrentBreakpoint(DEFAULT_BREAKPOINT as Breakpoint);
+      return;
+    }
+
+    const newBreakpoint = getBreakpoint(config, windowWidth);
+
+    // Don't update state if value is the same
+    if (currentBreakpoint.size === newBreakpoint?.size) return;
+
+    setCurrentBreakpoint(newBreakpoint);
+  }, [config, currentBreakpoint, windowWidth]);
+
+  useEffect(() => {
+    window.addEventListener("resize", debounce(handleResize, 200), {
+      passive: true,
+    });
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const up = useCallback(
+    (size: SizeType) => {
+      const sizeIndex = config.findIndex(item => item.size === size);
+      const currentIndex = config.findIndex(
+        item => item.size === currentBreakpoint.size,
+      );
+
+      return currentIndex >= sizeIndex;
+    },
+    [config, currentBreakpoint],
+  );
+
+  const down = useCallback(
+    (size: SizeType) => {
+      const sizeIndex = config.findIndex(item => item.size === size);
+      const currentIndex = config.findIndex(
+        item => item.size === currentBreakpoint.size,
+      );
+
+      return currentIndex <= sizeIndex;
+    },
+    [config, currentBreakpoint],
+  );
+
+  return {
+    breakpoint: isServerSide ? DEFAULT_BREAKPOINT : currentBreakpoint,
+    up,
+    down,
+  };
+};
+
+export { useBreakpoint };

package/src/hooks/useHideColumns/index.tsx

@@ -0,0 +1 @@
+export * from "./useHideColumns";

package/src/hooks/useHideColumns/useHideColumns.test.ts

@@ -0,0 +1,41 @@
+import { renderHook } from "@testing-library/react";
+import { useHideColumns } from ".";
+import { SizeType } from "../../types/size";
+
+const mockDown = jest.fn();
+jest.mock("../useBreakpoint", () => ({
+  useBreakpoint: () => ({
+    breakpoint: jest.fn(),
+    up: jest.fn(),
+    down: mockDown,
+  }),
+}));
+
+const mockSetHiddenColumns = jest.fn();
+const mockCollapseData = {
+  collapseOnSize: "md" as SizeType,
+  collapseColumns: ["highest_excess"],
+};
+
+describe("useHideColumns", () => {
+  it("should call setHiddenColumns handler if 'collapseData' is provided", () => {
+    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
+    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call setHiddenColumns with provided collapseColumns if useBreakpoint hook returns true", () => {
+    mockDown.mockImplementationOnce(() => true);
+    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
+    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
+    expect(mockSetHiddenColumns).toHaveBeenCalledWith(
+      mockCollapseData.collapseColumns,
+    );
+  });
+
+  it("should call setHiddenColumns with empty array if useBreakpoint hook returns false", () => {
+    mockDown.mockImplementationOnce(() => false);
+    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
+    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
+    expect(mockSetHiddenColumns).toHaveBeenCalledWith([]);
+  });
+});

package/src/hooks/useHideColumns/useHideColumns.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { CollapseDataType } from "../../components/DataTable/types";
+import { useBreakpoint } from "../useBreakpoint";
+
+const useHideColumns = (
+  setHiddenColumns: (cols: string[]) => void,
+  collapseData?: CollapseDataType,
+) => {
+  const { down } = useBreakpoint();
+
+  useEffect(() => {
+    if (collapseData) {
+      if (down(collapseData.collapseOnSize)) {
+        setHiddenColumns(collapseData.collapseColumns);
+      } else {
+        setHiddenColumns([]);
+      }
+    }
+  }, [collapseData, down, setHiddenColumns]);
+};
+
+useHideColumns.displayName = "useHideColumns";
+export { useHideColumns };

package/src/hooks/useWindowEvent/index.tsx

@@ -0,0 +1 @@
+export * from "./useWindowEvent";

package/src/hooks/useWindowEvent/useWindowEvent.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+
+function normaliseOptions(
+  options?: boolean | AddEventListenerOptions,
+  otherOptions: AddEventListenerOptions = {},
+): AddEventListenerOptions {
+  if (typeof options === "undefined") {
+    return otherOptions;
+  }
+
+  if (typeof options === "boolean") {
+    return { capture: options, ...otherOptions };
+  }
+
+  return { ...options, ...otherOptions };
+}
+
+export function useWindowEvent<EventType extends keyof WindowEventMap>(
+  type: EventType,
+  listener: (this: Window, ev: WindowEventMap[EventType]) => any,
+  options?: AddEventListenerOptions,
+): void {
+  useEffect(() => {
+    // Create an abort controller to abort the event listener if the hook is re-rendered
+    const controller = new AbortController();
+    const { signal } = controller;
+    const normalisedOptions = normaliseOptions(options, { signal });
+
+    window.addEventListener(type, listener, normalisedOptions);
+    return () => {
+      controller.abort();
+      window.removeEventListener(type, listener, normalisedOptions);
+    };
+  }, [type, listener, options]);
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./contexts";
+export * from "./hooks";
+export * from "./types";
+export { SSRProvider } from "@react-aria/ssr";

package/src/sample.test.mjs

@@ -0,0 +1,6 @@
+import fs from "fs/promises";
+
+test("esm support", async () => {
+  const file = await fs.readFile("package.json", "utf-8");
+  expect(file).toMatch(/"name": "@simplybusiness\/mobius"/);
+});

package/src/styles.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const classes: { [className: string]: string };
+  export default classes;
+}

package/src/types/components.ts

@@ -0,0 +1,9 @@
+import {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from "react";
+
+export type ForwardedRefComponent<T, RT> = ForwardRefExoticComponent<
+  PropsWithoutRef<T> & RefAttributes<RT>
+>;

package/src/types/events.ts

@@ -0,0 +1,55 @@
+import type {
+  KeyboardEvent,
+  FocusEvent,
+  ClipboardEvent,
+  CompositionEvent,
+} from "react";
+
+export interface KeyboardEvents {
+  /** Event called when the value changes (mandatory for controlled components) */
+  onKeyUp?: (e: KeyboardEvent) => void;
+
+  /** Event called when the value changes (mandatory for controlled components) */
+  onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+export interface ClipboardEvents {
+  /** Fired when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (e: ClipboardEvent) => void;
+
+  /** Fired when the user initiates a cut action through the browser's user interface. */
+  onCut?: (e: ClipboardEvent) => void;
+
+  /** Fired when the user initiates a paste action through the browser's user interface. */
+  onPaste?: (e: ClipboardEvent) => void;
+}
+
+export interface CompositionEvents {
+  /** Fired when a text composition system such as an input method editor completes or cancels the current composition session. */
+  onCompositionEnd?: (e: CompositionEvent) => void;
+
+  /** Fired when a text composition system such as an input method editor starts a new composition session. */
+  onCompositionStart?: (e: CompositionEvent) => void;
+
+  /** Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. */
+  onCompositionUpdate?: (e: CompositionEvent) => void;
+}
+
+export interface FocusEvents {
+  /** Fired when an element has lost focus. */
+  onBlur?: (e: FocusEvent) => void;
+
+  /** Fired when an element has gained focus. */
+  onFocus?: (e: FocusEvent) => void;
+
+  /** Fired when an element is about to gain focus. */
+  onFocusIn?: (e: FocusEvent) => void;
+
+  /** Fired when an element is about to lose focus. */
+  onFocusOut?: (e: FocusEvent) => void;
+}
+
+export interface InputEvents {
+  /** Event called when the value changes (mandatory for controlled components) */
+  onChange?: (value: string) => void;
+}

package/src/types/icon.ts

@@ -0,0 +1,9 @@
+export type IconDefinition = {
+  iconName: string;
+  width: number;
+  height: number;
+  svgPathData: string;
+  iconType: "stroke" | "fill";
+  strokeWidth?: number;
+  fill?: string | undefined;
+};

package/src/types/index.tsx

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./icon";
+export * from "./size";

package/src/types/size.ts

@@ -0,0 +1 @@
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

package/src/utils/changeCSS.ts

@@ -0,0 +1,18 @@
+const CSS_LINK_ID = "sb-theme";
+
+export const changeCSS = (cssUrl: string) => {
+  // Find CSS <link> element with id = "sb-theme"
+  const theme: HTMLElement | null = document.getElementById(CSS_LINK_ID);
+
+  if (theme) {
+    theme.setAttribute("href", cssUrl);
+  } else {
+    // Append a new link to document and set href
+    const link = document.createElement("link");
+    link.setAttribute("type", "text/css");
+    link.setAttribute("rel", "stylesheet");
+    link.setAttribute("href", cssUrl);
+    link.setAttribute("id", CSS_LINK_ID);
+    document.head.appendChild(link);
+  }
+};