feat(atomic): add Lit equivalent for @MapProp decorator

packages/atomic/src/utils/props-utils.ts

@@ -1,12 +1,44 @@
 import {isArray} from '@coveo/bueno';
 import {ComponentInterface, getElement} from '@stencil/core';
+import {ReactiveElement} from 'lit';
 import {camelToKebab, kebabToCamel} from './utils';
 
 interface MapPropOptions {
   attributePrefix?: string;
   splitValues?: boolean;
 }
 
+export function mapProperty<Element extends ReactiveElement>(
+  options?: MapPropOptions
+) {
+  return <
+    Instance extends Element & Record<string, unknown>,
+    K extends keyof Instance,
+  >(
+    proto: ReactiveElement,
+    propertyKey: K
+  ) => {
+    const ctor = proto.constructor as typeof ReactiveElement;
+    ctor.addInitializer((instance) => {
+      const props = {};
+      const prefix =
+        options?.attributePrefix || camelToKebab(propertyKey as string);
+
+      mapAttributesToProp(
+        prefix,
+        props,
+        Array.from(instance.attributes),
+        options?.splitValues ?? false
+      );
+
+      (instance as Instance)[propertyKey] = props as Instance[K];
+    });
+  };
+}
+
+/**
+ * @deprecated Use the `mapProperty` decorator instead.
+ */
 export function MapProp(opts?: MapPropOptions) {
   return (component: ComponentInterface, variableName: string) => {
     const {componentWillLoad} = component;