revotech-ui-kit 0.0.0 → 0.0.2-beta

package/src/helpers/base-element.ts

@@ -0,0 +1,79 @@
+import { LitElement } from 'lit';
+
+export abstract class BaseElement extends LitElement {
+  constructor() {
+    super();
+  }
+
+  protected abstract getAttributesToExclude(): string[];
+
+  // Helper method to filter attributes based on exclusion rules
+  protected getFilteredAttributes(): { [key: string]: string } {
+    const attributes: { [key: string]: string } = {};
+    Array.from(this.attributes).forEach(attr => {
+      if (!this.getAttributesToExclude().includes(attr.name)) {
+        attributes[attr.name] = attr.value ?? '';
+      }
+    });
+    return attributes;
+  }
+  protected isCustomPropertySet(property: string): boolean {
+    const value = getComputedStyle(this).getPropertyValue(property).trim();
+    return value !== 'inherit' && value.length > 0;
+  }
+
+  protected applyCustomClass(
+    variables: string[],
+    selector: string,
+    className = ''
+  ): void {
+    let customClass = '';
+
+    if (variables.some(variable => this.isCustomPropertySet(variable))) {
+      customClass = className;
+    }
+    if (customClass)
+      this.shadowRoot?.querySelector(selector)?.classList.add(customClass);
+  }
+}
+
+// usage
+
+// import {
+//   html,
+//   PropertyValues,
+
+//  } from "lit";
+// import { customElement, property } from "lit/decorators.js";
+// import { TWStyles} from "../styles/shared-style";
+// import { BaseElement } from "./base-element";
+
+//  @customElement("biopass-label")
+// export class Label extends BaseElement {
+//   constructor() {
+//     super();
+//     this.attachShadow({mode: 'open'});
+//   }
+//   @property({ type: String }) customClass: string ="";
+//   static styles = [ TWStyles];
+
+//   protected firstUpdated(_changedProperties: PropertyValues): void {
+//     const variables = [
+//       "--button-bg-color",
+//       "--button-text-color",
+//       "--button-border-radius",
+//       "--button-padding"
+//     ];
+
+//     this.applyCustomClass(variables, "label","label-base");
+//   }
+//    render() {
+
+//     return html`
+//       <label class="text-3xl font-bold underline bg-secondary text-primary label-base">
+//         <slot></slot>
+//       </label>
+
+//     `;
+//   }
+// }

package/src/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './mouse-conroller.helper';
 export * from './style.helpers';
+export * from './base-element';

package/src/lib/react/react.lib.ts

@@ -0,0 +1,18 @@
+import { createComponent } from '@lit-labs/react';
+import { Button } from '@/components/atoms/button/button.atom';
+import { Checkbox } from '@/components/atoms/checkbox/checkbox.atom';
+import React from 'react';
+
+const ButtonReact = createComponent({
+  tagName: 'rtg-button',
+  elementClass: Button,
+  react: React,
+});
+
+const CheckboxReact = createComponent({
+  tagName: 'rtg-checkbox',
+  elementClass: Checkbox,
+  react: React,
+});
+
+export { ButtonReact, CheckboxReact };