chore(components): adds apply-mixins from foundation (VIV-2017) (#2046)

* chore: adds apply-mixins from foundation * chore: formatting
Vonage · Dec 5, 2024 · db952b1 · db952b1
1 parent ee96006
commit db952b1
Show file tree

Hide file tree

Showing 22 changed files with 63 additions and 21 deletions.
diff --git a/libs/components/src/lib/accordion-item/accordion-item.ts b/libs/components/src/lib/accordion-item/accordion-item.ts
@@ -1,6 +1,7 @@
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Size } from '../enums.js';
 
 /**

diff --git a/libs/components/src/lib/alert/alert.ts b/libs/components/src/lib/alert/alert.ts
@@ -1,8 +1,9 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { handleEscapeKeyAndStopPropogation } from '../../shared/dialog/index';
 
 export type AlertConnotation =

diff --git a/libs/components/src/lib/audio-player/audio-player.ts b/libs/components/src/lib/audio-player/audio-player.ts
@@ -1,8 +1,9 @@
 /* eslint-disable max-len */
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, Observable, type ValueConverter } from '@microsoft/fast-element';
 import type { Connotation } from '../enums';
 import { MediaSkipBy } from '../enums';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Localized } from '../../shared/patterns';
 import type { Slider } from '../slider/slider';
 

diff --git a/libs/components/src/lib/badge/badge.ts b/libs/components/src/lib/badge/badge.ts
@@ -1,6 +1,7 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 
 import type { Appearance, Connotation, Shape } from '../enums.js';
 

diff --git a/libs/components/src/lib/banner/banner.ts b/libs/components/src/lib/banner/banner.ts
@@ -1,5 +1,6 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';

diff --git a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
@@ -1,6 +1,7 @@
 import { attr, observable } from '@microsoft/fast-element';
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { Anchor } from '../../shared/foundation/anchor/anchor';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 
 /**
  * @public

diff --git a/libs/components/src/lib/dial-pad/dial-pad.ts b/libs/components/src/lib/dial-pad/dial-pad.ts
@@ -1,6 +1,7 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { Localized } from '../../shared/patterns';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { TextField } from '../text-field/text-field';
 
 /**

diff --git a/libs/components/src/lib/dialog/dialog.ts b/libs/components/src/lib/dialog/dialog.ts
@@ -1,5 +1,6 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Localized } from '../../shared/patterns';
 import { handleEscapeKeyAndStopPropogation } from '../../shared/dialog';
 

diff --git a/libs/components/src/lib/fab/fab.ts b/libs/components/src/lib/fab/fab.ts
@@ -1,5 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { VividFoundationButton } from '../../shared/foundation/button';
 import type { Connotation, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';

diff --git a/libs/components/src/lib/nav-disclosure/nav-disclosure.ts b/libs/components/src/lib/nav-disclosure/nav-disclosure.ts
@@ -1,5 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
 

diff --git a/libs/components/src/lib/nav-item/nav-item.ts b/libs/components/src/lib/nav-item/nav-item.ts
@@ -1,6 +1,6 @@
-import { applyMixins } from '@microsoft/fast-foundation';
 import { html } from '@microsoft/fast-element';
 import { AffixIcon } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { TextAnchor } from '../text-anchor/text-anchor';
 
 /**

diff --git a/libs/components/src/lib/option/option.ts b/libs/components/src/lib/option/option.ts
@@ -1,6 +1,7 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, observable, Observable } from '@microsoft/fast-element';
 import { isHTMLElement } from '@microsoft/fast-web-utilities';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns/aria-global';
 

diff --git a/libs/components/src/lib/range-slider/range-slider.ts b/libs/components/src/lib/range-slider/range-slider.ts
@@ -3,7 +3,6 @@ import {
 	nullableNumberConverter,
 	observable,
 } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
 import {
 	keyArrowDown,
 	keyArrowUp,
@@ -16,6 +15,7 @@ import {
 	keyArrowLeft,
 	keyArrowRight,
 } from '@microsoft/fast-web-utilities/dist/key-codes';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Connotation } from '../enums';
 import {
 	type FormElement,

diff --git a/libs/components/src/lib/searchable-select/option-tag.ts b/libs/components/src/lib/searchable-select/option-tag.ts
@@ -1,5 +1,6 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Shape } from '../enums';
 import { Localized } from '../../shared/patterns';
 

diff --git a/libs/components/src/lib/slider/slider.ts b/libs/components/src/lib/slider/slider.ts
@@ -4,7 +4,7 @@ import {
 	observable,
 	volatile,
 } from '@microsoft/fast-element';
-import { applyMixins, getDirection } from '@microsoft/fast-foundation';
+import { getDirection } from '@microsoft/fast-foundation';
 import {
 	Direction,
 	keyArrowDown,
@@ -18,6 +18,7 @@ import {
 	keyArrowLeft,
 	keyArrowRight,
 } from '@microsoft/fast-web-utilities/dist/key-codes';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { roundToStepValue } from '../range-slider/utils/roundToStepValue';

diff --git a/libs/components/src/lib/split-button/split-button.ts b/libs/components/src/lib/split-button/split-button.ts
@@ -1,5 +1,6 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Localized } from '../../shared/patterns';

diff --git a/libs/components/src/lib/tab/tab.ts b/libs/components/src/lib/tab/tab.ts
@@ -1,5 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import { Localized } from '../../shared/patterns';
 

diff --git a/libs/components/src/lib/tag/tag.ts b/libs/components/src/lib/tag/tag.ts
@@ -1,5 +1,6 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { AffixIcon } from '../../shared/patterns/affix';
 
 import type { Appearance, Connotation, Shape } from '../enums.js';

diff --git a/libs/components/src/lib/text-field/text-field.ts b/libs/components/src/lib/text-field/text-field.ts
@@ -5,7 +5,7 @@ import {
 	observable,
 } from '@microsoft/fast-element';
 import { memoizeWith } from 'ramda';
-import { applyMixins } from '@microsoft/fast-foundation';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Appearance, Shape, Size } from '../enums';
 import {
 	AffixIcon,

diff --git a/libs/components/src/lib/tree-item/tree-item.ts b/libs/components/src/lib/tree-item/tree-item.ts
@@ -1,6 +1,6 @@
 import { TreeItem as FastTreeItem } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { AffixIcon } from '../../shared/patterns/affix';
 
 /**

diff --git a/libs/components/src/lib/video-player/video-player.ts b/libs/components/src/lib/video-player/video-player.ts
@@ -1,6 +1,7 @@
-import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import videojs from 'video.js';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { MediaSkipBy } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { getPlaybackRatesArray } from '../../shared/utils/playbackRates';

diff --git a/libs/components/src/shared/foundation/utilities/apply-mixins.ts b/libs/components/src/shared/foundation/utilities/apply-mixins.ts
@@ -0,0 +1,26 @@
+import { AttributeConfiguration } from '@microsoft/fast-element';
+
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+export function applyMixins(derivedCtor: any, ...baseCtors: any[]) {
+	const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
+
+	baseCtors.forEach((baseCtor) => {
+		Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+			if (name !== 'constructor') {
+				Object.defineProperty(
+					derivedCtor.prototype,
+					name,
+					/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+					Object.getOwnPropertyDescriptor(baseCtor.prototype, name)!
+				);
+			}
+		});
+
+		const baseAttributes = AttributeConfiguration.locate(baseCtor);
+		baseAttributes.forEach((x) => derivedAttributes.push(x));
+	});
+}