chore(component): update utils to prepare for slider

packages/components/src/types/property-types.ts

@@ -1 +1,4 @@
-export type PropertyType = 'boolean' | 'number' | 'string' | 'array' | 'object' | 'function';
+export type PrimitiveType = 'boolean' | 'number' | 'string';
+export type ReferenceType = 'array' | 'object' | 'function';
+
+export type PropertyType = PrimitiveType | ReferenceType;

packages/components/src/utils/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

packages/components/src/utils/is-value-empty.ts

@@ -1,5 +1,3 @@
-import { EMPTY_VALUES } from './property-checkers/constants';
-
 export function isValueEmpty(value: unknown): boolean {
-  return EMPTY_VALUES.some(v => v === value);
+  return value == null || value === '' || (typeof value === 'number' && isNaN(value));
 }

packages/components/src/utils/property-checkers/check-array-of.ts

@@ -0,0 +1,18 @@
+import { PrimitiveType } from '@/types/property-types';
+
+export function checkArrayOf<T extends { host: HTMLElement }>(
+  component: T,
+  prop: keyof T,
+  type: PrimitiveType,
+) {
+  const componentName = component.host.localName;
+  const value = component[prop];
+
+  const message = `The prop \`${String(
+    prop,
+  )}\` of the \`${componentName}\` component must be an \`${type}\` array.`;
+
+  if (!Array.isArray(value) || value.some(val => typeof val !== type)) {
+    console.error(message);
+  }
+}

packages/components/src/utils/property-checkers/index.ts

@@ -4,13 +4,16 @@ import { checkPattern } from './check-pattern';
 import { checkType } from './check-type';
 import { checkUrl } from './check-url';
 import { emptyOr } from './empty-or';
+import { checkArrayOf } from '@/utils/property-checkers/check-array-of';
 
 export const checkEmptyOrOneOf = emptyOr(checkOneOf);
 export const checkEmptyOrPattern = emptyOr(checkPattern);
 export const checkEmptyOrType = emptyOr(checkType);
 export const checkEmptyOrUrl = emptyOr(checkUrl);
+export const checkEmptyOrArrayOf = emptyOr(checkArrayOf);
 
 export const checkRequiredAndOneOf = requiredAnd(checkOneOf);
 export const checkRequiredAndPattern = requiredAnd(checkPattern);
 export const checkRequiredAndType = requiredAnd(checkType);
 export const checkRequiredAndUrl = requiredAnd(checkUrl);
+export const checkRequiredAndArrayOf = requiredAnd(checkArrayOf);

packages/components/src/utils/property-checkers/tests/check-array-of.spec.ts

@@ -0,0 +1,65 @@
+import { checkArrayOf } from '../check-array-of';
+import { PrimitiveType } from '@/types';
+import { describe } from 'node:test';
+
+describe('checkArrayOf', () => {
+  const componentName = 'post-component';
+  const propName = 'myProp';
+  const mockValues = [
+    undefined,
+    null,
+    true,
+    false,
+    42,
+    NaN,
+    'string',
+    '',
+    [],
+    {},
+    () => {
+      /* empty */
+    },
+  ];
+
+  let consoleErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  const primitiveTypes: PrimitiveType[] = ['boolean', 'string', 'number'];
+  primitiveTypes.forEach(type => {
+    describe(type, () => {
+      const error = `The prop \`${propName}\` of the \`${componentName}\` component must be an \`${type}\` array.`;
+
+      const runCheckForValue = (value: unknown) => {
+        const component = { host: { localName: componentName } as HTMLElement, [propName]: value };
+        checkArrayOf(component, propName, type);
+      };
+
+      it('should log an error if the value is not an array', () => {
+        mockValues
+          .filter(value => !Array.isArray(value))
+          .forEach(value => {
+            runCheckForValue(value);
+            expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
+          });
+      });
+
+      it('should log an error if the array contains some values that don\'t have the expected type', () => {
+        runCheckForValue(mockValues);
+        expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(error));
+      });
+
+      it('should not log an error if the array contains only values with the expected type', () => {
+        const validArray = mockValues.filter(value => typeof value === type);
+        runCheckForValue(validArray);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

packages/components/src/utils/property-checkers/tests/required-and.spec.ts

@@ -1,12 +1,11 @@
 import { requiredAnd } from '../required-and';
-import { EMPTY_VALUES } from '../constants';
 describe('requiredAnd', () => {
   const mockCheck = jest.fn();
 
   const mockRequiredAndCheck = requiredAnd(mockCheck);
 
   it('should throw error if the provided value is empty', () => {
-    EMPTY_VALUES.forEach(emptyValue => {
+    [undefined, null, '', NaN].forEach(emptyValue => {
       const component = { host: { localName: 'post-component' } as HTMLElement, prop: emptyValue };
       const prop = component['prop'];
       const error = `The prop \`${emptyValue}\` of the \`post-component\` component is not defined.`;
@@ -17,7 +16,6 @@ describe('requiredAnd', () => {
   it('should run the check if the provided value is not empty', () => {
     [
       0,
-      NaN,
       ' ',
       false,
       [],
@@ -36,7 +34,7 @@ describe('requiredAnd', () => {
   });
 
   it('should pass all provided arguments to the nested check function', () => {
-    const args = ['non empty value', true, false, ['arg in an array'], { arg: 'in an object' }];
+    const args = [0, false, 'text', [], {}];
 
     args.forEach(arg => {
       const component = { host: { localName: 'post-component' } as HTMLElement, prop: arg };

packages/components/src/utils/tests/clamp.spec.ts

@@ -0,0 +1,15 @@
+import { clamp } from '../clamp';
+
+describe('clamp', () => {
+  it('should return the provided value if within the bounds', () => {
+    expect(clamp(10, 0, 100)).toEqual(10);
+  });
+
+  it('should return the min if provided value is lower', () => {
+    expect(clamp(0, 10, 100)).toEqual(10);
+  });
+
+  it('should return the max if provided value is greater', () => {
+    expect(clamp(100, 0, 10)).toEqual(10);
+  });
+});