@central-design-system/components 3.0.0-alpha.3 → 3.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -19,6 +19,7 @@
   },
   "files": [
     "dist",
+    "src/utils",
     "src/scss",
     "nuxt.js"
   ],
@@ -30,7 +31,7 @@
     "publish:alpha": "npm publish --tag next"
   },
   "peerDependencies": {
-    "vue": "3.2.47"
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@types/node": "16.18.3",

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 5/22/2023, 12:52:07 PM
+ * Generated on 5/22/2023, 2:54:43 PM
  **/
 
 /**

package/src/utils/__test__/helper.test.ts

@@ -0,0 +1,59 @@
+import { pick, isObject, mergeDeep, getNestedValue, getObjectValueByPath, getPropertyFromItem } from '../helpers';
+import {
+  mockHelpersIsObject,
+  mockHelpersMergeDeep,
+  mockHelpersGetNestedValue,
+  mockHelpersGetObjectValueByPath,
+  mockHelpersGetPropertyFromItem,
+  mockHelpersPick
+} from './mocks/helper.mock';
+
+describe('isObject', () => {
+  mockHelpersIsObject.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      expect(isObject(initial)).toEqual(expected);
+    });
+  });
+});
+
+describe('mergeDeep', () => {
+  mockHelpersMergeDeep.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      expect(mergeDeep(initial.source, initial.target, initial.arrayFn)).toEqual(expected);
+    });
+  });
+});
+
+describe('getNestedValue', () => {
+  mockHelpersGetNestedValue.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      expect(getNestedValue(initial.obj, initial.path, initial.fallback)).toEqual(expected);
+    });
+  });
+});
+
+describe('getObjectValueByPath', () => {
+  mockHelpersGetObjectValueByPath.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      expect(getObjectValueByPath(initial.obj, initial.path, initial.fallback)).toEqual(expected);
+    });
+  });
+});
+
+describe('getPropertyFromItem', () => {
+  mockHelpersGetPropertyFromItem.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      expect(getPropertyFromItem(initial.item, initial.property, initial.fallback)).toEqual(expected);
+    });
+  });
+});
+
+describe('pick', () => {
+  mockHelpersPick.forEach(({ name, initial, expected }) => {
+    it(name, () => {
+      const [yes, no] = pick(initial.obj, initial.paths);
+      expect(yes).toEqual(expected.yes);
+      expect(no).toEqual(expected.no);
+    });
+  });
+});

package/src/utils/__test__/mocks/helper.mock.ts

@@ -0,0 +1,362 @@
+import type { IMockDataProvider } from '@/types/vitest';
+import type { SelectItemKey } from '@components/utils';
+
+export const mockHelpersIsObject: IMockDataProvider[] = [
+  {
+    name: 'returns true for objects',
+    initial: {},
+    expected: true
+  },
+  {
+    name: 'returns true for objects with value',
+    initial: { a: 'foo' },
+    expected: true
+  },
+  {
+    name: 'returns false for null',
+    initial: null,
+    expected: false
+  },
+  {
+    name: 'returns false for undefined',
+    initial: undefined,
+    expected: false
+  },
+  {
+    name: 'returns false for empty array',
+    initial: [],
+    expected: false
+  },
+  {
+    name: 'returns false for string',
+    initial: 'str',
+    expected: false
+  },
+  {
+    name: 'returns false for number',
+    initial: 42,
+    expected: false
+  },
+  {
+    name: 'returns false for boolean',
+    initial: true,
+    expected: false
+  },
+  {
+    name: 'returns false for function',
+    initial: () => {},
+    expected: false
+  }
+];
+
+type TMockHelpersMergeDeepInitial = {
+  source?: Record<string, any>;
+  target?: Record<string, any>;
+  arrayFn?: (a: unknown[], b: unknown[]) => unknown[];
+};
+export const mockHelpersMergeDeep: IMockDataProvider<TMockHelpersMergeDeepInitial>[] = [
+  {
+    name: 'should be merges empty objects',
+    initial: {},
+    expected: {}
+  },
+  {
+    name: 'should be merges simple objects',
+    initial: {
+      source: { a: 'foo' },
+      target: { b: 'bar' }
+    },
+    expected: {
+      a: 'foo',
+      b: 'bar'
+    }
+  },
+  {
+    name: 'should be deeply merges nested objects',
+    initial: {
+      source: {
+        a: {
+          b: {
+            c: 'foo'
+          }
+        }
+      },
+      target: {
+        a: {
+          b: {
+            c: 'foo',
+            d: 'bar'
+          }
+        }
+      }
+    },
+    expected: {
+      a: {
+        b: {
+          c: 'foo',
+          d: 'bar'
+        }
+      }
+    }
+  },
+  {
+    name: 'should be uses custom arrayFn to merge arrays',
+    initial: {
+      source: {
+        a: [
+          {
+            a: 'foo'
+          }
+        ]
+      },
+      target: {
+        a: [
+          {
+            b: 'bar'
+          }
+        ]
+      },
+      arrayFn: (a, b) => a.concat(b)
+    },
+    expected: {
+      a: [{ a: 'foo' }, { b: 'bar' }]
+    }
+  }
+];
+
+type TMockHelpersGetNestedValueInitial = {
+  obj?: Record<string, any>;
+  path: (string | number)[];
+  fallback?: any;
+};
+export const mockHelpersGetNestedValue: IMockDataProvider<TMockHelpersGetNestedValueInitial>[] = [
+  {
+    name: 'should return nested value when path is valid',
+    initial: {
+      obj: { a: { b: { c: 'x' } } },
+      path: ['a', 'b', 'c']
+    },
+    expected: 'x'
+  },
+  {
+    name: 'should return fallback when path is invalid',
+    initial: {
+      obj: { a: 'x' },
+      path: ['a', 'b', 'd'],
+      fallback: 'y'
+    },
+    expected: 'y'
+  },
+  {
+    name: 'should return fallback when obj is undefined',
+    initial: {
+      obj: undefined,
+      path: ['a', 'b', 'd'],
+      fallback: 'y'
+    },
+    expected: 'y'
+  },
+  {
+    name: 'should return obj when path is empty array',
+    initial: {
+      obj: {},
+      path: []
+    },
+    expected: {}
+  },
+  {
+    name: 'should return obj with fallback if provided and path is empty array',
+    initial: {
+      obj: undefined,
+      path: [],
+      fallback: 'y'
+    },
+    expected: 'y'
+  }
+];
+
+type TMockHelpersGetObjectValueByPathInitial = {
+  obj?: Record<string, any> | any;
+  path: string;
+  fallback?: any;
+};
+export const mockHelpersGetObjectValueByPath: IMockDataProvider<TMockHelpersGetObjectValueByPathInitial>[] = [
+  {
+    name: 'should return nested value when path is valid',
+    initial: {
+      obj: { a: { b: { c: 'x' } } },
+      path: 'a.b.c'
+    },
+    expected: 'x'
+  },
+  {
+    name: 'should handles indexed arrays',
+    initial: {
+      obj: { users: [{ name: 'Jane' }, { name: 'John' }] },
+      path: 'users[1].name'
+    },
+    expected: 'John'
+  },
+  {
+    name: 'should return fallback when path is invalid',
+    initial: {
+      obj: { a: 'x' },
+      path: 'a.b.d'
+    },
+    expected: undefined
+  },
+  {
+    name: 'should return fallback when obj is undefined',
+    initial: {
+      obj: undefined,
+      path: 'a.b.d',
+      fallback: 'y'
+    },
+    expected: 'y'
+  },
+  {
+    name: 'should return undefined when path is empty string',
+    initial: {
+      obj: {},
+      path: ''
+    },
+    expected: undefined
+  },
+  {
+    name: 'should return obj with fallback if provided and path is empty string',
+    initial: {
+      obj: undefined,
+      path: '',
+      fallback: 'y'
+    },
+    expected: 'y'
+  },
+  {
+    name: "should return obj[path] if it isn't undefined",
+    initial: {
+      obj: { firstKey: 'value' },
+      path: 'firstKey',
+      fallback: 'fallbackValue'
+    },
+    expected: 'value'
+  },
+  {
+    name: 'should return fallback in case of invalid input data',
+    initial: {
+      obj: null,
+      path: null as any,
+      fallback: 5
+    },
+    expected: 5
+  }
+];
+
+type TMockHelpersGetPropertyFromItem = {
+  item: any;
+  property: SelectItemKey;
+  fallback?: any;
+};
+export const mockHelpersGetPropertyFromItem: IMockDataProvider<TMockHelpersGetPropertyFromItem>[] = [
+  {
+    name: 'should return the item if property is null',
+    initial: {
+      item: 'item',
+      property: null as any,
+      fallback: 'fallback'
+    },
+    expected: 'item'
+  },
+  {
+    name: 'should return the item if property is undefined',
+    initial: {
+      item: undefined,
+      property: null as any,
+      fallback: 'fallback'
+    },
+    expected: 'fallback'
+  },
+  {
+    name: 'should return the fallback if item is not an object',
+    initial: {
+      item: 1,
+      property: 'path',
+      fallback: 'fallback'
+    },
+    expected: 'fallback'
+  },
+  {
+    name: 'should return the correct value for a string property',
+    initial: {
+      item: { path: 'value' },
+      property: 'path'
+    },
+    expected: 'value'
+  },
+  {
+    name: 'should return the correct value for an array property and fallback when not found',
+    initial: {
+      item: { path: { subpath: 'value' } },
+      property: ['path', 'subpath'],
+      fallback: 'fallback'
+    },
+    expected: 'value'
+  },
+  {
+    name: 'should return the correct value for a function property',
+    initial: {
+      item: { path: 'value' },
+      property: (item: any) => item.path,
+      fallback: 'fallback'
+    },
+    expected: 'value'
+  },
+  {
+    name: 'should return the fallback if the function returns undefined',
+    initial: {
+      item: { path: 'value' },
+      property: () => undefined,
+      fallback: 'fallback'
+    },
+    expected: 'fallback'
+  }
+];
+
+type TMockHelpersPick = {
+  obj: Record<string, any>;
+  paths: string[] | RegExp[] | any[];
+};
+export const mockHelpersPick: IMockDataProvider<TMockHelpersPick>[] = [
+  {
+    name: 'should correctly selects specified properties and returns both picked and unpicked objects',
+    initial: {
+      obj: { a: 1, b: 2, c: 3 },
+      paths: ['a', 'c']
+    },
+    expected: {
+      yes: { a: 1, c: 3 },
+      no: { b: 2 }
+    }
+  },
+  {
+    name: 'should correctly selects specified properties using regex',
+    initial: {
+      obj: { a: 1, b: 2, c: 3 },
+      paths: [/^[ab]$/]
+    },
+    expected: {
+      yes: { a: 1, b: 2 },
+      no: { c: 3 }
+    }
+  },
+  {
+    name: 'should returns empty objects for non-existing properties',
+    initial: {
+      obj: { a: 1, b: 2, c: 3 },
+      paths: ['x', 'y', 'z']
+    },
+    expected: {
+      yes: {},
+      no: { a: 1, b: 2, c: 3 }
+    }
+  }
+];

package/src/utils/__test__/mocks/propFactory.mock.ts

@@ -0,0 +1,88 @@
+import { IMockDataProvider } from '@/types/vitest';
+import { ComponentObjectPropsOptions } from '@components/shims-vue';
+
+export const mockPropFactory: IMockDataProvider<
+  { props: ComponentObjectPropsOptions; source: string; defaults?: any },
+  ComponentObjectPropsOptions
+>[] = [
+  {
+    name: 'propFactory',
+    initial: {
+      props: {
+        foo: String,
+        bar: Array
+      },
+      source: 'props'
+    },
+    expected: {
+      foo: {
+        source: 'props',
+        type: String
+      },
+      bar: {
+        source: 'props',
+        type: Array
+      }
+    }
+  },
+  {
+    name: 'propFactory',
+    initial: {
+      props: {
+        test: {
+          type: String,
+          default: ''
+        }
+      },
+      source: 'test'
+    },
+    expected: {
+      test: {
+        source: 'test',
+        type: String,
+        default: ''
+      }
+    }
+  },
+  {
+    name: 'propFactory',
+    initial: {
+      props: {
+        bar: {
+          type: Object,
+          default: {}
+        }
+      },
+      source: 'bar'
+    },
+    expected: {
+      bar: {
+        source: 'bar',
+        type: Object,
+        default: {}
+      }
+    }
+  },
+  {
+    name: 'propFactory',
+    initial: {
+      props: {
+        foo: {
+          type: String,
+          default: undefined
+        }
+      },
+      source: 'foo',
+      defaults: {
+        foo: 'string'
+      }
+    },
+    expected: {
+      foo: {
+        default: 'string',
+        source: 'foo',
+        type: String
+      }
+    }
+  }
+];

package/src/utils/__test__/propFactory.test.ts

@@ -0,0 +1,9 @@
+import { propsFactory } from '../propsFactory';
+import { mockPropFactory } from './mocks/propFactory.mock';
+
+describe('propFactory.ts', () => {
+  it.each(mockPropFactory)('should be props', ({ initial, expected }) => {
+    const makeProps = propsFactory(initial.props, initial.source);
+    expect(makeProps(initial.defaults)).toEqual(expected);
+  });
+});

package/src/utils/anchor.ts

@@ -0,0 +1,76 @@
+import { includes } from './';
+
+const block = ['top', 'bottom'] as const;
+const inline = ['start', 'end', 'left', 'right'] as const;
+type Tblock = typeof block[number];
+type Tinline = typeof inline[number];
+export type TAnchor =
+  | Tblock
+  | Tinline
+  | 'center'
+  | 'center center'
+  | `${Tblock} ${Tinline | 'center'}`
+  | `${Tinline} ${Tblock | 'center'}`;
+export type ParsedAnchor =
+  | { side: 'center'; align: 'center' }
+  | { side: Tblock; align: 'left' | 'right' | 'center' }
+  | { side: 'left' | 'right'; align: Tblock | 'center' };
+
+/** Parse a raw anchor string into an object */
+export function parseAnchor(anchor: TAnchor) {
+  const anchorArr = anchor.split(' ') as [Tblock | Tinline | 'center', Tblock | Tinline | 'center' | undefined];
+  const side = anchorArr[0];
+  let align = anchorArr[1];
+
+  if (!align) {
+    align = includes(block, side) ? 'start' : includes(inline, side) ? 'top' : 'center';
+  }
+
+  return {
+    side: toPhysical(side),
+    align: toPhysical(align)
+  } as ParsedAnchor;
+}
+
+export function toPhysical(str: 'center' | Tblock | Tinline) {
+  if (str === 'start') return 'left';
+  if (str === 'end') return 'right';
+  return str;
+}
+
+export function flipSide(anchor: ParsedAnchor) {
+  return {
+    side: {
+      center: 'center',
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left'
+    }[anchor.side],
+    align: anchor.align
+  } as ParsedAnchor;
+}
+
+export function flipAlign(anchor: ParsedAnchor) {
+  return {
+    side: anchor.side,
+    align: {
+      center: 'center',
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left'
+    }[anchor.align]
+  } as ParsedAnchor;
+}
+
+export function flipCorner(anchor: ParsedAnchor) {
+  return {
+    side: anchor.align,
+    align: anchor.side
+  } as ParsedAnchor;
+}
+
+export function getAxis(anchor: ParsedAnchor) {
+  return includes(block, anchor.side) ? 'y' : 'x';
+}

package/src/utils/animation.ts

@@ -0,0 +1,62 @@
+import { Box } from './box';
+
+/** @see https://stackoverflow.com/a/57876601/2074736 */
+export function nullifyTransforms(el: HTMLElement): Box {
+  const rect = el.getBoundingClientRect();
+  const style = getComputedStyle(el);
+  const tx = style.transform;
+
+  if (tx) {
+    let ta, sx, sy, dx, dy;
+    if (tx.startsWith('matrix3d(')) {
+      ta = tx.slice(9, -1).split(/, /);
+      sx = +ta[0];
+      sy = +ta[5];
+      dx = +ta[12];
+      dy = +ta[13];
+    } else if (tx.startsWith('matrix(')) {
+      ta = tx.slice(7, -1).split(/, /);
+      sx = +ta[0];
+      sy = +ta[3];
+      dx = +ta[4];
+      dy = +ta[5];
+    } else {
+      return new Box(rect);
+    }
+
+    const to = style.transformOrigin;
+    const x = rect.x - dx - (1 - sx) * parseFloat(to);
+    const y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(' ') + 1));
+    const w = sx ? rect.width / sx : el.offsetWidth + 1;
+    const h = sy ? rect.height / sy : el.offsetHeight + 1;
+
+    return new Box({ x, y, width: w, height: h });
+  } else {
+    return new Box(rect);
+  }
+}
+
+export function animate(
+  el: Element,
+  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+  options?: number | KeyframeAnimationOptions
+) {
+  if (typeof el.animate === 'undefined') return { finished: Promise.resolve() };
+
+  let animation: Animation;
+  try {
+    animation = el.animate(keyframes, options);
+  } catch (err) {
+    return { finished: Promise.resolve() };
+  }
+
+  if (typeof animation.finished === 'undefined') {
+    (animation as any).finished = new Promise((resolve) => {
+      animation.onfinish = () => {
+        resolve(animation);
+      };
+    });
+  }
+
+  return animation;
+}