feat(react-component): expose element class names

.changeset/flat-dryers-tell.md

@@ -0,0 +1,6 @@
+---
+"@tapsioss/react-components": minor
+---
+
+Expose element class
+

packages/react-components/scripts/generate.ts

@@ -40,8 +40,6 @@ type ReactMetadata = {
 
 const asyncExec = promisify(exec);
 
-const LIT_REACT_NAMESPACE = "LitReact";
-
 const { dirname } = getFileMeta(import.meta.url);
 
 const packageDir = path.resolve(dirname, "..");
@@ -134,8 +132,10 @@ const createReactMetadata = (
     e.endsWith("Slots"),
   );
 
+  const inputClassName = elementClassName.replace("ElementClass", "Element");
+
   return {
-    elementClass: elementClassName,
+    elementClass: inputClassName,
     componentName,
     elementTag,
     events,
@@ -148,9 +148,8 @@ const createReactMetadata = (
 
 const getReactComponentImports = () => {
   return [
-    `import * as ${LIT_REACT_NAMESPACE} from "@lit/react";`,
+    `import { createComponent, type ReactWebComponent, type EventName } from "@lit/react";`,
     `import * as React from "react";`,
-    'import { type ReactWebComponent } from "@lit/react";',
   ].join("\n");
 };
 
@@ -183,7 +182,7 @@ const getReactComponentCode = async (
           return `${eventNameInReact}: '${eventName}'`;
         }
 
-        return `${eventNameInReact}: '${eventName}' as ${LIT_REACT_NAMESPACE}.EventName<${eventClass}>`;
+        return `${eventNameInReact}: '${eventName}' as EventName<${eventClass}>`;
       })
       .filter(event => event !== null)
       .join(",") || ""
@@ -196,10 +195,10 @@ const getReactComponentCode = async (
 
   const exports =
     exportsList.length > 0
-      ? `export { ${exportsList.filter(Boolean).join(", ")} };`
+      ? `export { ${[`${componentName}Element`, ...exportsList.filter(Boolean)].join(", ")} };`
       : "";
 
-  const elementClass = `${componentName}ElementClass`;
+  const elementClass = `${componentName}Element`;
   const importsList = [
     `${rawElementClass} as ${elementClass}`,
     registerFunction,
@@ -213,12 +212,33 @@ const getReactComponentCode = async (
     ? `${registerFunction}();`
     : `if (typeof window !== "undefined" && !customElements.get("${parentInfo?.tagName}")){\n/* eslint-disable no-console */\nconsole.warn("[TAPSI][${componentName}]: The \`${parentInfo?.tagName}\` tag is not registered. Since \`${componentName}\` is a compound component, it should be wrapped inside \`${parentInfo?.elementClassName}\` component.");\n/* eslint-enable no-console */}`;
 
+  const componentType = `ReactWebComponent<${elementClass}${
+    _events?.length > 0
+      ? `, { ${
+          _events
+            ?.map(event => {
+              const eventClass = event.class;
+              const eventNameInReact = event.key;
+
+              if (!eventClass) {
+                return `${eventNameInReact}: string`;
+              }
+
+              return `${eventNameInReact}: EventName<${eventClass}>`;
+            })
+            .filter(event => event !== null)
+            .join(",") || ""
+        } }`
+      : ""
+  }>`;
+
   return Mustache.render(
     componentTemplateStr,
     {
       imports,
       register: registerSection,
       componentName,
+      componentType,
       elementTag,
       elementClass,
       events,

packages/react-components/src/Avatar/Avatar.ts

@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Avatar as AvatarElementClass,
+  Avatar as AvatarElement,
   AvatarSlots,
   registerAvatar,
 } from "@tapsioss/web-components";
 
 registerAvatar();
 
-export const Avatar = LitReact.createComponent({
+export const Avatar: ReactWebComponent<AvatarElement> = createComponent({
   tagName: "tapsi-avatar",
-  elementClass: AvatarElementClass,
+  elementClass: AvatarElement,
   react: React,
   events: {},
 });
 
-export { AvatarSlots };
+export { AvatarElement, AvatarSlots };

packages/react-components/src/Badge/Badge.ts

@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Badge as BadgeElementClass,
+  Badge as BadgeElement,
   BadgeSlots,
   registerBadge,
 } from "@tapsioss/web-components";
 
 registerBadge();
 
-export const Badge = LitReact.createComponent({
+export const Badge: ReactWebComponent<BadgeElement> = createComponent({
   tagName: "tapsi-badge",
-  elementClass: BadgeElementClass,
+  elementClass: BadgeElement,
   react: React,
   events: {},
 });
 
-export { BadgeSlots };
+export { BadgeElement, BadgeSlots };

packages/react-components/src/BadgeWrapper/BadgeWrapper.ts

@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  BadgeWrapper as BadgeWrapperElementClass,
+  BadgeWrapper as BadgeWrapperElement,
   BadgeWrapperSlots,
   registerBadgeWrapper,
 } from "@tapsioss/web-components";
 
 registerBadgeWrapper();
 
-export const BadgeWrapper = LitReact.createComponent({
-  tagName: "tapsi-badge-wrapper",
-  elementClass: BadgeWrapperElementClass,
-  react: React,
-  events: {},
-});
+export const BadgeWrapper: ReactWebComponent<BadgeWrapperElement> =
+  createComponent({
+    tagName: "tapsi-badge-wrapper",
+    elementClass: BadgeWrapperElement,
+    react: React,
+    events: {},
+  });
 
-export { BadgeWrapperSlots };
+export { BadgeWrapperElement, BadgeWrapperSlots };

packages/react-components/src/Banner/Banner.ts

@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Banner as BannerElementClass,
+  Banner as BannerElement,
   BannerSlots,
   registerBanner,
 } from "@tapsioss/web-components";
 
 registerBanner();
 
-export const Banner = LitReact.createComponent({
+export const Banner: ReactWebComponent<BannerElement> = createComponent({
   tagName: "tapsi-banner",
-  elementClass: BannerElementClass,
+  elementClass: BannerElement,
   react: React,
   events: {},
 });
 
-export { BannerSlots };
+export { BannerElement, BannerSlots };

packages/react-components/src/BottomNavigation/BottomNavigation.ts

@@ -1,28 +1,36 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   BottomNavigationActiveChangeEvent,
-  BottomNavigation as BottomNavigationElementClass,
+  BottomNavigation as BottomNavigationElement,
   BottomNavigationItemSlots,
   BottomNavigationSlots,
   registerBottomNavigation,
 } from "@tapsioss/web-components";
 
 registerBottomNavigation();
 
-export const BottomNavigation = LitReact.createComponent({
+export const BottomNavigation: ReactWebComponent<
+  BottomNavigationElement,
+  { onActiveChange: EventName<BottomNavigationActiveChangeEvent> }
+> = createComponent({
   tagName: "tapsi-bottom-navigation",
-  elementClass: BottomNavigationElementClass,
+  elementClass: BottomNavigationElement,
   react: React,
   events: {
     onActiveChange:
-      "activechange" as LitReact.EventName<BottomNavigationActiveChangeEvent>,
+      "activechange" as EventName<BottomNavigationActiveChangeEvent>,
   },
 });
 
 export {
   BottomNavigationActiveChangeEvent,
+  BottomNavigationElement,
   BottomNavigationItemSlots,
   BottomNavigationSlots,
 };

packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts

@@ -1,7 +1,7 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
-import { BottomNavigationItem as BottomNavigationItemElementClass } from "@tapsioss/web-components";
+import { BottomNavigationItem as BottomNavigationItemElement } from "@tapsioss/web-components";
 
 if (
   typeof window !== "undefined" &&
@@ -14,9 +14,10 @@ if (
   /* eslint-enable no-console */
 }
 
-export const BottomNavigationItem = LitReact.createComponent({
-  tagName: "tapsi-bottom-navigation-item",
-  elementClass: BottomNavigationItemElementClass,
-  react: React,
-  events: {},
-});
+export const BottomNavigationItem: ReactWebComponent<BottomNavigationItemElement> =
+  createComponent({
+    tagName: "tapsi-bottom-navigation-item",
+    elementClass: BottomNavigationItemElement,
+    react: React,
+    events: {},
+  });

packages/react-components/src/BottomSheet/BottomSheet.ts

@@ -1,10 +1,14 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   BottomSheetClosedEvent,
   BottomSheetClosingEvent,
-  BottomSheet as BottomSheetElementClass,
+  BottomSheet as BottomSheetElement,
   BottomSheetHideEvent,
   BottomSheetOpenedEvent,
   BottomSheetOpeningEvent,
@@ -16,24 +20,36 @@ import {
 
 registerBottomSheet();
 
-export const BottomSheet = LitReact.createComponent({
+export const BottomSheet: ReactWebComponent<
+  BottomSheetElement,
+  {
+    onSnapped: EventName<BottomSheetSnappedEvent>;
+    onOpening: EventName<BottomSheetOpeningEvent>;
+    onClosing: EventName<BottomSheetClosingEvent>;
+    onOpened: EventName<BottomSheetOpenedEvent>;
+    onClosed: EventName<BottomSheetClosedEvent>;
+    onHide: EventName<BottomSheetHideEvent>;
+    onShow: EventName<BottomSheetShowEvent>;
+  }
+> = createComponent({
   tagName: "tapsi-bottom-sheet",
-  elementClass: BottomSheetElementClass,
+  elementClass: BottomSheetElement,
   react: React,
   events: {
-    onSnapped: "snapped" as LitReact.EventName<BottomSheetSnappedEvent>,
-    onOpening: "opening" as LitReact.EventName<BottomSheetOpeningEvent>,
-    onClosing: "closing" as LitReact.EventName<BottomSheetClosingEvent>,
-    onOpened: "opened" as LitReact.EventName<BottomSheetOpenedEvent>,
-    onClosed: "closed" as LitReact.EventName<BottomSheetClosedEvent>,
-    onHide: "hide" as LitReact.EventName<BottomSheetHideEvent>,
-    onShow: "show" as LitReact.EventName<BottomSheetShowEvent>,
+    onSnapped: "snapped" as EventName<BottomSheetSnappedEvent>,
+    onOpening: "opening" as EventName<BottomSheetOpeningEvent>,
+    onClosing: "closing" as EventName<BottomSheetClosingEvent>,
+    onOpened: "opened" as EventName<BottomSheetOpenedEvent>,
+    onClosed: "closed" as EventName<BottomSheetClosedEvent>,
+    onHide: "hide" as EventName<BottomSheetHideEvent>,
+    onShow: "show" as EventName<BottomSheetShowEvent>,
   },
 });
 
 export {
   BottomSheetClosedEvent,
   BottomSheetClosingEvent,
+  BottomSheetElement,
   BottomSheetHideEvent,
   BottomSheetOpenedEvent,
   BottomSheetOpeningEvent,

packages/react-components/src/Button/Button.ts

@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Button as ButtonElementClass,
+  Button as ButtonElement,
   ButtonSlots,
   registerButton,
 } from "@tapsioss/web-components";
 
 registerButton();
 
-export const Button = LitReact.createComponent({
+export const Button: ReactWebComponent<ButtonElement> = createComponent({
   tagName: "tapsi-button",
-  elementClass: ButtonElementClass,
+  elementClass: ButtonElement,
   react: React,
   events: {},
 });
 
-export { ButtonSlots };
+export { ButtonElement, ButtonSlots };

packages/react-components/src/ButtonGroup/ButtonGroup.ts

@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  ButtonGroup as ButtonGroupElementClass,
+  ButtonGroup as ButtonGroupElement,
   ButtonGroupSlots,
   registerButtonGroup,
 } from "@tapsioss/web-components";
 
 registerButtonGroup();
 
-export const ButtonGroup = LitReact.createComponent({
-  tagName: "tapsi-button-group",
-  elementClass: ButtonGroupElementClass,
-  react: React,
-  events: {},
-});
+export const ButtonGroup: ReactWebComponent<ButtonGroupElement> =
+  createComponent({
+    tagName: "tapsi-button-group",
+    elementClass: ButtonGroupElement,
+    react: React,
+    events: {},
+  });
 
-export { ButtonGroupSlots };
+export { ButtonGroupElement, ButtonGroupSlots };