@simplybusiness/mobius 3.0.0

package/src/utils/combineTruthyObjects.test.ts

@@ -0,0 +1,125 @@
+import { combineTruthyObjects } from "./combineTruthyObjects";
+
+describe("combineTruthyObjects", () => {
+  it("combines objects correctly", () => {
+    const input = [
+      {
+        foo: "foo",
+      },
+      {
+        bar: "bar",
+      },
+    ];
+    const expected = {
+      foo: "foo",
+      bar: "bar",
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("ignores false and null values", () => {
+    const input = [
+      {
+        foo: "foo",
+      },
+      false && {
+        baz: "baz",
+      },
+      null,
+      {
+        bar: "bar",
+      },
+    ];
+    const expected = {
+      foo: "foo",
+      bar: "bar",
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("overwrites earlier values with later values", () => {
+    const input = [
+      {
+        foo: "one",
+      },
+      {
+        foo: "two",
+      },
+    ];
+    const expected = {
+      foo: "two",
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("deep merges nested objects", () => {
+    const input = [
+      {
+        foo: {
+          bar: "bar",
+        },
+      },
+      {
+        foo: {
+          baz: "baz",
+        },
+      },
+    ];
+    const expected = {
+      foo: {
+        bar: "bar",
+        baz: "baz",
+      },
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("deep merges multiple levels", () => {
+    const input = [
+      {
+        foo: {
+          bar: {
+            one: "one",
+          },
+        },
+      },
+      {
+        foo: {
+          bar: {
+            two: "two",
+          },
+        },
+      },
+    ];
+    const expected = {
+      foo: {
+        bar: {
+          one: "one",
+          two: "two",
+        },
+      },
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("merges array values together", () => {
+    const input = [
+      {
+        foo: [1, 2, 3],
+      },
+      {
+        foo: [4, 5, 6],
+      },
+    ];
+    const expected = {
+      foo: [1, 2, 3, 4, 5, 6],
+    };
+    const result = combineTruthyObjects(input);
+    expect(result).toStrictEqual(expected);
+  });
+});

package/src/utils/combineTruthyObjects.ts

@@ -0,0 +1,12 @@
+import * as merge from "deepmerge";
+
+/**
+ * Combines the provided objects into a single output object,
+ * while removing any null or false values.
+ * @param objects - the objects to combine
+ */
+export function combineTruthyObjects<T>(objects: (T | boolean | null)[]) {
+  const truthyObjects = objects.filter(o => o && o !== null);
+
+  return merge.all(truthyObjects as object[]) as T;
+}

package/src/utils/excludeControls.test.ts

@@ -0,0 +1,26 @@
+import { excludeControls } from "./excludeControls";
+
+describe("excludeControls", () => {
+  describe("given a list of props", () => {
+    it("returns an object where each prop has an entry with disabled params", () => {
+      const props = ["className", "elementType"];
+
+      const actual = excludeControls(...props);
+
+      const expected = {
+        elementType: {
+          table: {
+            disable: true,
+          },
+        },
+        className: {
+          table: {
+            disable: true,
+          },
+        },
+      };
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/utils/excludeControls.ts

@@ -0,0 +1,28 @@
+// This function generates data structure required to hide specified
+// prop from individual stories. Key 'table' is where specified key
+// is disabled.
+//
+// The above is documented here:
+// https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
+//
+// The expected usage looks as follows:
+//
+// <Meta
+//   title="Components/MyComponent"
+//   component={MyComponent}
+//   argTypes={{
+//     label: {
+//       control: {
+//         type: "text",
+//       },
+//       table: {
+//         disable: true,
+//       },
+//     },
+//   }}
+// />
+export const excludeControls = (...args: string[]) =>
+  args.reduce(
+    (prev, acc) => ({ ...prev, [acc]: { table: { disable: true } } }),
+    {},
+  );

package/src/utils/mergeRefs.ts

@@ -0,0 +1,17 @@
+// Ref: https://github.com/gregberge/react-merge-refs/blob/812fefa4390884a4a2d1bc489d869bd088df8ff5/src/index.tsx
+import type { MutableRefObject, LegacyRef, RefCallback } from "react";
+
+export function mergeRefs<T = any>(
+  refs: Array<MutableRefObject<T> | LegacyRef<T>>,
+): RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        // eslint-disable-next-line no-param-reassign
+        (ref as MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}

package/src/utils/sizeClasses.test.ts

@@ -0,0 +1,27 @@
+import { sizeClasses } from "./sizeClasses";
+import { SizeType } from "../types/size";
+
+describe("sizeClasses", () => {
+  describe("given the size is set", () => {
+    it.each(["xs", "sm", "md", "lg", "xl", "xxl"])(
+      "it should return CSS modifier-like class name --is-%s",
+      size => {
+        const input = sizeClasses(size as SizeType);
+
+        expect(input).toEqual(
+          expect.objectContaining({
+            [`--is-${size}`]: true,
+          }),
+        );
+      },
+    );
+  });
+
+  describe("given the size is not set", () => {
+    it("should return null", () => {
+      const input = undefined;
+
+      expect(sizeClasses(input)).toEqual({});
+    });
+  });
+});

package/src/utils/sizeClasses.ts

@@ -0,0 +1,16 @@
+import { SizeType } from "../types/size";
+
+export const sizeClasses = (size: SizeType | undefined) => {
+  if (!size) {
+    return {};
+  }
+
+  return {
+    "--is-xs": size === "xs",
+    "--is-sm": size === "sm",
+    "--is-md": size === "md",
+    "--is-lg": size === "lg",
+    "--is-xl": size === "xl",
+    "--is-xxl": size === "xxl",
+  };
+};

package/src/utils/spaceDelimitedList.test.ts

@@ -0,0 +1,31 @@
+import { spaceDelimitedList } from "./spaceDelimitedList";
+
+describe("spaceDelimitedList", () => {
+  it("returns undefined when given an empty list", () => {
+    expect(spaceDelimitedList([])).toBeUndefined();
+  });
+
+  it("returns a string when given a non-empty list", () => {
+    expect(spaceDelimitedList(["a", "b", "c"])).toBe("a b c");
+  });
+
+  it("returns a string when given a list with a single element", () => {
+    expect(spaceDelimitedList(["a"])).toBe("a");
+  });
+
+  it("returns a undefined when given a list with a single null element", () => {
+    expect(spaceDelimitedList([null])).toBeUndefined();
+  });
+
+  it("returns a undefined when given a list with a single undefined element", () => {
+    expect(spaceDelimitedList([undefined])).toBeUndefined();
+  });
+
+  it("returns a undefined when given a list with a single empty string element", () => {
+    expect(spaceDelimitedList([""])).toBeUndefined();
+  });
+
+  it("Removes any null or undefined values", () => {
+    expect(spaceDelimitedList(["a", null, "b", undefined, "c"])).toBe("a b c");
+  });
+});

package/src/utils/spaceDelimitedList.ts

@@ -0,0 +1,5 @@
+export function spaceDelimitedList(
+  list: (string | null | undefined)[],
+): string | undefined {
+  return list.filter(Boolean).join(" ") || undefined;
+}