@veeqo/ui 0.0.1 → 0.0.3

package/src/theme/modules/shadows.ts

@@ -1,4 +1,4 @@
-export enum shadows {
+export enum Shadows {
   sm = '0px 1px 3px rgba(55, 66, 77, 0.15)',
   base = '0px 4px 6px rgba(27, 33, 38, 0.2)',
   md = '0px 10px 15px rgba(27, 33, 38, 0.2)',

package/src/utils/buildClassnames.ts

@@ -0,0 +1,2 @@
+export const buildClassnames = (names: (string | undefined)[]): string =>
+  names.filter(Boolean).join(' ');

package/src/utils/color.ts

@@ -0,0 +1,27 @@
+/**
+ * A function to convert hex color to rgb.
+ */
+export const hexToRgb = (hex: string) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const hexTmp = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexTmp);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+};
+
+/**
+ * A function to get a hex color with opacity, after converting to `rgba`.
+ * @param hex color in hex format
+ */
+export const getOpaqueHexColor = (hex: string, opacity: number) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+};

package/src/utils/generateId.ts

@@ -0,0 +1,4 @@
+export const generateId = (prefix: string): string => {
+  const randomNumber = Math.floor(Math.random() * 1000);
+  return `${prefix}-${randomNumber}`;
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { buildClassnames } from './buildClassnames';
+export { getOpaqueHexColor, hexToRgb } from './color';
+export { generateId } from './generateId';

package/src/utils/paginationList.ts

@@ -0,0 +1,6 @@
+export const paginationDefaultRangeList = [
+  { label: '10 / page', value: 10 },
+  { label: '25 / page', value: 25 },
+  { label: '50 / page', value: 50 },
+  { label: '100 / page', value: 100 },
+];

package/src/utils/setupIntersectionObserverMock.ts

@@ -0,0 +1,46 @@
+/**
+ * https://stackoverflow.com/a/58651649
+ *
+ * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
+ * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
+ * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the intersection observer, but its methods.
+ */
+export function setupIntersectionObserverMock({
+  root = null,
+  rootMargin = '',
+  thresholds = [],
+  disconnect = () => null,
+  observe = () => null,
+  takeRecords = () => [],
+  unobserve = () => null,
+} = {}): void {
+  class MockIntersectionObserver implements IntersectionObserver {
+    readonly root: Element | null = root;
+
+    readonly rootMargin: string = rootMargin;
+
+    readonly thresholds: ReadonlyArray<number> = thresholds;
+
+    disconnect: () => void = disconnect;
+
+    observe: (target: Element) => void = observe;
+
+    takeRecords: () => IntersectionObserverEntry[] = takeRecords;
+
+    unobserve: (target: Element) => void = unobserve;
+  }
+
+  Object.defineProperty(window, 'IntersectionObserver', {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver,
+  });
+
+  Object.defineProperty(global, 'IntersectionObserver', {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver,
+  });
+}