From 05def5729570913ab419e773a39f65c02df854f5 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 30 Apr 2025 16:14:55 +0330 Subject: [PATCH 1/5] fix(react-components): expose element class --- packages/react-components/scripts/generate.ts | 2 +- packages/react-components/src/Avatar/Avatar.ts | 2 +- packages/react-components/src/Badge/Badge.ts | 2 +- packages/react-components/src/BadgeWrapper/BadgeWrapper.ts | 2 +- packages/react-components/src/Banner/Banner.ts | 2 +- .../src/BottomNavigation/BottomNavigation.ts | 1 + packages/react-components/src/BottomSheet/BottomSheet.ts | 1 + packages/react-components/src/Button/Button.ts | 2 +- packages/react-components/src/ButtonGroup/ButtonGroup.ts | 2 +- packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts | 2 +- .../react-components/src/ChatBubbleOut/ChatBubbleOut.ts | 2 +- packages/react-components/src/Checkbox/Checkbox.ts | 2 +- packages/react-components/src/Chip/Chip.ts | 2 +- packages/react-components/src/ChipGroup/ChipGroup.ts | 2 +- packages/react-components/src/EmptyState/EmptyState.ts | 2 +- packages/react-components/src/FileInput/FileInput.ts | 2 +- packages/react-components/src/IconButton/IconButton.ts | 2 +- packages/react-components/src/Modal/Modal.ts | 2 +- packages/react-components/src/Notice/Notice.ts | 2 +- packages/react-components/src/PinInput/PinInput.ts | 2 +- packages/react-components/src/Pinwheel/Pinwheel.ts | 2 +- .../react-components/src/PinwheelGroup/PinwheelGroup.ts | 2 +- packages/react-components/src/Radio/Radio.ts | 2 +- packages/react-components/src/RateSlider/RateSlider.ts | 2 +- .../react-components/src/SegmentedView/SegmentedView.ts | 1 + packages/react-components/src/Skeleton/Skeleton.ts | 2 +- packages/react-components/src/Snackbar/Snackbar.ts | 7 ++++++- packages/react-components/src/Stepper/Stepper.ts | 2 +- packages/react-components/src/Switch/Switch.ts | 2 +- packages/react-components/src/TextArea/TextArea.ts | 2 +- packages/react-components/src/TextField/TextField.ts | 2 +- packages/react-components/src/Tooltip/Tooltip.ts | 2 +- 32 files changed, 37 insertions(+), 29 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index 92d5c7ca..e4686c39 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -196,7 +196,7 @@ const getReactComponentCode = async ( const exports = exportsList.length > 0 - ? `export { ${exportsList.filter(Boolean).join(", ")} };` + ? `export { ${[`${componentName}ElementClass`, ...exportsList.filter(Boolean)].join(", ")} };` : ""; const elementClass = `${componentName}ElementClass`; diff --git a/packages/react-components/src/Avatar/Avatar.ts b/packages/react-components/src/Avatar/Avatar.ts index 4c2a4d7f..6c8b478f 100644 --- a/packages/react-components/src/Avatar/Avatar.ts +++ b/packages/react-components/src/Avatar/Avatar.ts @@ -16,4 +16,4 @@ export const Avatar = LitReact.createComponent({ events: {}, }); -export { AvatarSlots }; +export { AvatarElementClass, AvatarSlots }; diff --git a/packages/react-components/src/Badge/Badge.ts b/packages/react-components/src/Badge/Badge.ts index dc889cfc..74afca1f 100644 --- a/packages/react-components/src/Badge/Badge.ts +++ b/packages/react-components/src/Badge/Badge.ts @@ -16,4 +16,4 @@ export const Badge = LitReact.createComponent({ events: {}, }); -export { BadgeSlots }; +export { BadgeElementClass, BadgeSlots }; diff --git a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts index a7ca9cb1..52821f8b 100644 --- a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts +++ b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts @@ -16,4 +16,4 @@ export const BadgeWrapper = LitReact.createComponent({ events: {}, }); -export { BadgeWrapperSlots }; +export { BadgeWrapperElementClass, BadgeWrapperSlots }; diff --git a/packages/react-components/src/Banner/Banner.ts b/packages/react-components/src/Banner/Banner.ts index e9b853ad..ca4cd878 100644 --- a/packages/react-components/src/Banner/Banner.ts +++ b/packages/react-components/src/Banner/Banner.ts @@ -16,4 +16,4 @@ export const Banner = LitReact.createComponent({ events: {}, }); -export { BannerSlots }; +export { BannerElementClass, BannerSlots }; diff --git a/packages/react-components/src/BottomNavigation/BottomNavigation.ts b/packages/react-components/src/BottomNavigation/BottomNavigation.ts index f9bfccf4..bb927cc9 100644 --- a/packages/react-components/src/BottomNavigation/BottomNavigation.ts +++ b/packages/react-components/src/BottomNavigation/BottomNavigation.ts @@ -23,6 +23,7 @@ export const BottomNavigation = LitReact.createComponent({ export { BottomNavigationActiveChangeEvent, + BottomNavigationElementClass, BottomNavigationItemSlots, BottomNavigationSlots, }; diff --git a/packages/react-components/src/BottomSheet/BottomSheet.ts b/packages/react-components/src/BottomSheet/BottomSheet.ts index 9813859d..cc70c17e 100644 --- a/packages/react-components/src/BottomSheet/BottomSheet.ts +++ b/packages/react-components/src/BottomSheet/BottomSheet.ts @@ -34,6 +34,7 @@ export const BottomSheet = LitReact.createComponent({ export { BottomSheetClosedEvent, BottomSheetClosingEvent, + BottomSheetElementClass, BottomSheetHideEvent, BottomSheetOpenedEvent, BottomSheetOpeningEvent, diff --git a/packages/react-components/src/Button/Button.ts b/packages/react-components/src/Button/Button.ts index 4f3560da..ff97717d 100644 --- a/packages/react-components/src/Button/Button.ts +++ b/packages/react-components/src/Button/Button.ts @@ -16,4 +16,4 @@ export const Button = LitReact.createComponent({ events: {}, }); -export { ButtonSlots }; +export { ButtonElementClass, ButtonSlots }; diff --git a/packages/react-components/src/ButtonGroup/ButtonGroup.ts b/packages/react-components/src/ButtonGroup/ButtonGroup.ts index bd7d7ea5..8769ad09 100644 --- a/packages/react-components/src/ButtonGroup/ButtonGroup.ts +++ b/packages/react-components/src/ButtonGroup/ButtonGroup.ts @@ -16,4 +16,4 @@ export const ButtonGroup = LitReact.createComponent({ events: {}, }); -export { ButtonGroupSlots }; +export { ButtonGroupElementClass, ButtonGroupSlots }; diff --git a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts index 6e808bc0..4fb225c9 100644 --- a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts +++ b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts @@ -16,4 +16,4 @@ export const ChatBubbleIn = LitReact.createComponent({ events: {}, }); -export { ChatBubbleInSlots }; +export { ChatBubbleInElementClass, ChatBubbleInSlots }; diff --git a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts index 159993d6..5ab4bb65 100644 --- a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts +++ b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts @@ -16,4 +16,4 @@ export const ChatBubbleOut = LitReact.createComponent({ events: {}, }); -export { ChatBubbleOutSlots }; +export { ChatBubbleOutElementClass, ChatBubbleOutSlots }; diff --git a/packages/react-components/src/Checkbox/Checkbox.ts b/packages/react-components/src/Checkbox/Checkbox.ts index f619e201..c803bc0c 100644 --- a/packages/react-components/src/Checkbox/Checkbox.ts +++ b/packages/react-components/src/Checkbox/Checkbox.ts @@ -15,4 +15,4 @@ export const Checkbox = LitReact.createComponent({ events: { onChange: "input", onInput: "input" }, }); -export {}; +export { CheckboxElementClass }; diff --git a/packages/react-components/src/Chip/Chip.ts b/packages/react-components/src/Chip/Chip.ts index 1aa4faf9..ee6d39c6 100644 --- a/packages/react-components/src/Chip/Chip.ts +++ b/packages/react-components/src/Chip/Chip.ts @@ -21,4 +21,4 @@ export const Chip = LitReact.createComponent({ }, }); -export { ChipDeselectEvent, ChipSelectEvent, ChipSlots }; +export { ChipDeselectEvent, ChipElementClass, ChipSelectEvent, ChipSlots }; diff --git a/packages/react-components/src/ChipGroup/ChipGroup.ts b/packages/react-components/src/ChipGroup/ChipGroup.ts index 7a7af5b6..b1194a1d 100644 --- a/packages/react-components/src/ChipGroup/ChipGroup.ts +++ b/packages/react-components/src/ChipGroup/ChipGroup.ts @@ -20,4 +20,4 @@ export const ChipGroup = LitReact.createComponent({ }, }); -export { ChipGroupSelectChangeEvent, ChipGroupSlots }; +export { ChipGroupElementClass, ChipGroupSelectChangeEvent, ChipGroupSlots }; diff --git a/packages/react-components/src/EmptyState/EmptyState.ts b/packages/react-components/src/EmptyState/EmptyState.ts index 182b4bb5..2022b796 100644 --- a/packages/react-components/src/EmptyState/EmptyState.ts +++ b/packages/react-components/src/EmptyState/EmptyState.ts @@ -16,4 +16,4 @@ export const EmptyState = LitReact.createComponent({ events: {}, }); -export { EmptyStateSlots }; +export { EmptyStateElementClass, EmptyStateSlots }; diff --git a/packages/react-components/src/FileInput/FileInput.ts b/packages/react-components/src/FileInput/FileInput.ts index 50fc0d32..4b5e29b1 100644 --- a/packages/react-components/src/FileInput/FileInput.ts +++ b/packages/react-components/src/FileInput/FileInput.ts @@ -21,4 +21,4 @@ export const FileInput = LitReact.createComponent({ }, }); -export { FileInputRetryEvent, FileInputSlots }; +export { FileInputElementClass, FileInputRetryEvent, FileInputSlots }; diff --git a/packages/react-components/src/IconButton/IconButton.ts b/packages/react-components/src/IconButton/IconButton.ts index efc0a814..594f86ff 100644 --- a/packages/react-components/src/IconButton/IconButton.ts +++ b/packages/react-components/src/IconButton/IconButton.ts @@ -16,4 +16,4 @@ export const IconButton = LitReact.createComponent({ events: {}, }); -export { IconButtonSlots }; +export { IconButtonElementClass, IconButtonSlots }; diff --git a/packages/react-components/src/Modal/Modal.ts b/packages/react-components/src/Modal/Modal.ts index 9f1c762d..f35b43c0 100644 --- a/packages/react-components/src/Modal/Modal.ts +++ b/packages/react-components/src/Modal/Modal.ts @@ -21,4 +21,4 @@ export const Modal = LitReact.createComponent({ }, }); -export { ModalHideEvent, ModalShowEvent, ModalSlots }; +export { ModalElementClass, ModalHideEvent, ModalShowEvent, ModalSlots }; diff --git a/packages/react-components/src/Notice/Notice.ts b/packages/react-components/src/Notice/Notice.ts index 5c65f402..71677cef 100644 --- a/packages/react-components/src/Notice/Notice.ts +++ b/packages/react-components/src/Notice/Notice.ts @@ -21,4 +21,4 @@ export const Notice = LitReact.createComponent({ }, }); -export { NoticeHideEvent, NoticeShowEvent, NoticeSlots }; +export { NoticeElementClass, NoticeHideEvent, NoticeShowEvent, NoticeSlots }; diff --git a/packages/react-components/src/PinInput/PinInput.ts b/packages/react-components/src/PinInput/PinInput.ts index 7f88663a..540bea0e 100644 --- a/packages/react-components/src/PinInput/PinInput.ts +++ b/packages/react-components/src/PinInput/PinInput.ts @@ -20,4 +20,4 @@ export const PinInput = LitReact.createComponent({ }, }); -export { PinInputCompleteEvent }; +export { PinInputCompleteEvent, PinInputElementClass }; diff --git a/packages/react-components/src/Pinwheel/Pinwheel.ts b/packages/react-components/src/Pinwheel/Pinwheel.ts index 2770ed8b..3d48c6cf 100644 --- a/packages/react-components/src/Pinwheel/Pinwheel.ts +++ b/packages/react-components/src/Pinwheel/Pinwheel.ts @@ -17,4 +17,4 @@ export const Pinwheel = LitReact.createComponent({ events: { onChange: "change", onInput: "change" }, }); -export { PinwheelItemSlots, PinwheelSlots }; +export { PinwheelElementClass, PinwheelItemSlots, PinwheelSlots }; diff --git a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts index f528c69c..10c8f726 100644 --- a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts +++ b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts @@ -16,4 +16,4 @@ export const PinwheelGroup = LitReact.createComponent({ events: {}, }); -export { PinwheelGroupSlots }; +export { PinwheelGroupElementClass, PinwheelGroupSlots }; diff --git a/packages/react-components/src/Radio/Radio.ts b/packages/react-components/src/Radio/Radio.ts index c854cca1..1158dec1 100644 --- a/packages/react-components/src/Radio/Radio.ts +++ b/packages/react-components/src/Radio/Radio.ts @@ -15,4 +15,4 @@ export const Radio = LitReact.createComponent({ events: { onChange: "input", onInput: "input" }, }); -export {}; +export { RadioElementClass }; diff --git a/packages/react-components/src/RateSlider/RateSlider.ts b/packages/react-components/src/RateSlider/RateSlider.ts index e0081157..a1a4a2b3 100644 --- a/packages/react-components/src/RateSlider/RateSlider.ts +++ b/packages/react-components/src/RateSlider/RateSlider.ts @@ -15,4 +15,4 @@ export const RateSlider = LitReact.createComponent({ events: { onChange: "change", onInput: "change" }, }); -export {}; +export { RateSliderElementClass }; diff --git a/packages/react-components/src/SegmentedView/SegmentedView.ts b/packages/react-components/src/SegmentedView/SegmentedView.ts index 24edace6..8a780761 100644 --- a/packages/react-components/src/SegmentedView/SegmentedView.ts +++ b/packages/react-components/src/SegmentedView/SegmentedView.ts @@ -23,6 +23,7 @@ export const SegmentedView = LitReact.createComponent({ export { SegmentedViewActiveChangeEvent, + SegmentedViewElementClass, SegmentedViewItemSlots, SegmentedViewSlots, }; diff --git a/packages/react-components/src/Skeleton/Skeleton.ts b/packages/react-components/src/Skeleton/Skeleton.ts index ad756879..937d0a5d 100644 --- a/packages/react-components/src/Skeleton/Skeleton.ts +++ b/packages/react-components/src/Skeleton/Skeleton.ts @@ -16,4 +16,4 @@ export const Skeleton = LitReact.createComponent({ events: {}, }); -export { SkeletonSlots }; +export { SkeletonElementClass, SkeletonSlots }; diff --git a/packages/react-components/src/Snackbar/Snackbar.ts b/packages/react-components/src/Snackbar/Snackbar.ts index b9036537..c50bc899 100644 --- a/packages/react-components/src/Snackbar/Snackbar.ts +++ b/packages/react-components/src/Snackbar/Snackbar.ts @@ -21,4 +21,9 @@ export const Snackbar = LitReact.createComponent({ }, }); -export { SnackbarHideEvent, SnackbarShowEvent, SnackbarSlots }; +export { + SnackbarElementClass, + SnackbarHideEvent, + SnackbarShowEvent, + SnackbarSlots, +}; diff --git a/packages/react-components/src/Stepper/Stepper.ts b/packages/react-components/src/Stepper/Stepper.ts index 22902482..da3dc392 100644 --- a/packages/react-components/src/Stepper/Stepper.ts +++ b/packages/react-components/src/Stepper/Stepper.ts @@ -15,4 +15,4 @@ export const Stepper = LitReact.createComponent({ events: { onChange: "change", onInput: "change" }, }); -export {}; +export { StepperElementClass }; diff --git a/packages/react-components/src/Switch/Switch.ts b/packages/react-components/src/Switch/Switch.ts index 15a50047..7de83924 100644 --- a/packages/react-components/src/Switch/Switch.ts +++ b/packages/react-components/src/Switch/Switch.ts @@ -15,4 +15,4 @@ export const Switch = LitReact.createComponent({ events: { onChange: "input", onInput: "input" }, }); -export {}; +export { SwitchElementClass }; diff --git a/packages/react-components/src/TextArea/TextArea.ts b/packages/react-components/src/TextArea/TextArea.ts index 88de808f..e0547bec 100644 --- a/packages/react-components/src/TextArea/TextArea.ts +++ b/packages/react-components/src/TextArea/TextArea.ts @@ -16,4 +16,4 @@ export const TextArea = LitReact.createComponent({ events: { onChange: "input", onInput: "input" }, }); -export { TextAreaSlots }; +export { TextAreaElementClass, TextAreaSlots }; diff --git a/packages/react-components/src/TextField/TextField.ts b/packages/react-components/src/TextField/TextField.ts index 439b5940..9f6941ab 100644 --- a/packages/react-components/src/TextField/TextField.ts +++ b/packages/react-components/src/TextField/TextField.ts @@ -16,4 +16,4 @@ export const TextField = LitReact.createComponent({ events: { onChange: "input", onInput: "input" }, }); -export { TextFieldSlots }; +export { TextFieldElementClass, TextFieldSlots }; diff --git a/packages/react-components/src/Tooltip/Tooltip.ts b/packages/react-components/src/Tooltip/Tooltip.ts index 5c4ac368..33d1a321 100644 --- a/packages/react-components/src/Tooltip/Tooltip.ts +++ b/packages/react-components/src/Tooltip/Tooltip.ts @@ -20,4 +20,4 @@ export const Tooltip = LitReact.createComponent({ }, }); -export { TooltipHideEvent, TooltipShowEvent }; +export { TooltipElementClass, TooltipHideEvent, TooltipShowEvent }; From 0af9ad3b0555e208f73b1076f9a0053bdce0a7d7 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 30 Apr 2025 16:15:08 +0330 Subject: [PATCH 2/5] docs: update changelog --- .changeset/flat-dryers-tell.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/flat-dryers-tell.md diff --git a/.changeset/flat-dryers-tell.md b/.changeset/flat-dryers-tell.md new file mode 100644 index 00000000..d2fc5fc4 --- /dev/null +++ b/.changeset/flat-dryers-tell.md @@ -0,0 +1,6 @@ +--- +"@tapsioss/react-components": minor +--- + +Expose element class + \ No newline at end of file From b384d0032a5796170401ee8a8b1d0a0b4e5c76d3 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sat, 3 May 2025 14:42:58 +0330 Subject: [PATCH 3/5] refactor: rename ElementClass to Input --- packages/react-components/scripts/generate.ts | 8 +++++--- packages/react-components/src/Avatar/Avatar.ts | 6 +++--- packages/react-components/src/Badge/Badge.ts | 6 +++--- .../react-components/src/BadgeWrapper/BadgeWrapper.ts | 6 +++--- packages/react-components/src/Banner/Banner.ts | 6 +++--- .../src/BottomNavigation/BottomNavigation.ts | 6 +++--- .../src/BottomNavigationItem/BottomNavigationItem.ts | 4 ++-- .../react-components/src/BottomSheet/BottomSheet.ts | 6 +++--- packages/react-components/src/Button/Button.ts | 6 +++--- .../react-components/src/ButtonGroup/ButtonGroup.ts | 6 +++--- .../react-components/src/ChatBubbleIn/ChatBubbleIn.ts | 6 +++--- .../src/ChatBubbleOut/ChatBubbleOut.ts | 6 +++--- packages/react-components/src/Checkbox/Checkbox.ts | 6 +++--- packages/react-components/src/Chip/Chip.ts | 6 +++--- packages/react-components/src/ChipGroup/ChipGroup.ts | 6 +++--- packages/react-components/src/Divider/Divider.ts | 4 ++-- .../react-components/src/EmptyState/EmptyState.ts | 6 +++--- packages/react-components/src/FileInput/FileInput.ts | 6 +++--- .../react-components/src/IconButton/IconButton.ts | 6 +++--- packages/react-components/src/Modal/Modal.ts | 6 +++--- packages/react-components/src/Notice/Notice.ts | 6 +++--- packages/react-components/src/PinInput/PinInput.ts | 6 +++--- packages/react-components/src/Pinwheel/Pinwheel.ts | 6 +++--- .../src/PinwheelGroup/PinwheelGroup.ts | 6 +++--- .../react-components/src/PinwheelItem/PinwheelItem.ts | 4 ++-- .../src/ProgressIndicator/ProgressIndicator.ts | 4 ++-- packages/react-components/src/Radio/Radio.ts | 9 +++------ .../react-components/src/RateSlider/RateSlider.ts | 6 +++--- .../src/SegmentedView/SegmentedView.ts | 6 +++--- .../src/SegmentedViewItem/SegmentedViewItem.ts | 4 ++-- packages/react-components/src/Skeleton/Skeleton.ts | 6 +++--- packages/react-components/src/Snackbar/Snackbar.ts | 11 +++-------- packages/react-components/src/Spinner/Spinner.ts | 4 ++-- packages/react-components/src/Stepper/Stepper.ts | 6 +++--- packages/react-components/src/Switch/Switch.ts | 6 +++--- packages/react-components/src/TextArea/TextArea.ts | 6 +++--- packages/react-components/src/TextField/TextField.ts | 6 +++--- packages/react-components/src/Tooltip/Tooltip.ts | 6 +++--- 38 files changed, 110 insertions(+), 116 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index e4686c39..d6fb3894 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -134,8 +134,10 @@ const createReactMetadata = ( e.endsWith("Slots"), ); + const inputClassName = elementClassName.replace("ElementClass", "Input"); + return { - elementClass: elementClassName, + elementClass: inputClassName, componentName, elementTag, events, @@ -196,10 +198,10 @@ const getReactComponentCode = async ( const exports = exportsList.length > 0 - ? `export { ${[`${componentName}ElementClass`, ...exportsList.filter(Boolean)].join(", ")} };` + ? `export { ${[`${componentName}Input`, ...exportsList.filter(Boolean)].join(", ")} };` : ""; - const elementClass = `${componentName}ElementClass`; + const elementClass = `${componentName}Input`; const importsList = [ `${rawElementClass} as ${elementClass}`, registerFunction, diff --git a/packages/react-components/src/Avatar/Avatar.ts b/packages/react-components/src/Avatar/Avatar.ts index 6c8b478f..16908a10 100644 --- a/packages/react-components/src/Avatar/Avatar.ts +++ b/packages/react-components/src/Avatar/Avatar.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Avatar as AvatarElementClass, + Avatar as AvatarInput, AvatarSlots, registerAvatar, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerAvatar(); export const Avatar = LitReact.createComponent({ tagName: "tapsi-avatar", - elementClass: AvatarElementClass, + elementClass: AvatarInput, react: React, events: {}, }); -export { AvatarElementClass, AvatarSlots }; +export { AvatarInput, AvatarSlots }; diff --git a/packages/react-components/src/Badge/Badge.ts b/packages/react-components/src/Badge/Badge.ts index 74afca1f..42fc2c1e 100644 --- a/packages/react-components/src/Badge/Badge.ts +++ b/packages/react-components/src/Badge/Badge.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Badge as BadgeElementClass, + Badge as BadgeInput, BadgeSlots, registerBadge, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerBadge(); export const Badge = LitReact.createComponent({ tagName: "tapsi-badge", - elementClass: BadgeElementClass, + elementClass: BadgeInput, react: React, events: {}, }); -export { BadgeElementClass, BadgeSlots }; +export { BadgeInput, BadgeSlots }; diff --git a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts index 52821f8b..565afde6 100644 --- a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts +++ b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - BadgeWrapper as BadgeWrapperElementClass, + BadgeWrapper as BadgeWrapperInput, BadgeWrapperSlots, registerBadgeWrapper, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerBadgeWrapper(); export const BadgeWrapper = LitReact.createComponent({ tagName: "tapsi-badge-wrapper", - elementClass: BadgeWrapperElementClass, + elementClass: BadgeWrapperInput, react: React, events: {}, }); -export { BadgeWrapperElementClass, BadgeWrapperSlots }; +export { BadgeWrapperInput, BadgeWrapperSlots }; diff --git a/packages/react-components/src/Banner/Banner.ts b/packages/react-components/src/Banner/Banner.ts index ca4cd878..6381d74e 100644 --- a/packages/react-components/src/Banner/Banner.ts +++ b/packages/react-components/src/Banner/Banner.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Banner as BannerElementClass, + Banner as BannerInput, BannerSlots, registerBanner, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerBanner(); export const Banner = LitReact.createComponent({ tagName: "tapsi-banner", - elementClass: BannerElementClass, + elementClass: BannerInput, react: React, events: {}, }); -export { BannerElementClass, BannerSlots }; +export { BannerInput, BannerSlots }; diff --git a/packages/react-components/src/BottomNavigation/BottomNavigation.ts b/packages/react-components/src/BottomNavigation/BottomNavigation.ts index bb927cc9..ee340d6d 100644 --- a/packages/react-components/src/BottomNavigation/BottomNavigation.ts +++ b/packages/react-components/src/BottomNavigation/BottomNavigation.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { BottomNavigationActiveChangeEvent, - BottomNavigation as BottomNavigationElementClass, + BottomNavigation as BottomNavigationInput, BottomNavigationItemSlots, BottomNavigationSlots, registerBottomNavigation, @@ -13,7 +13,7 @@ registerBottomNavigation(); export const BottomNavigation = LitReact.createComponent({ tagName: "tapsi-bottom-navigation", - elementClass: BottomNavigationElementClass, + elementClass: BottomNavigationInput, react: React, events: { onActiveChange: @@ -23,7 +23,7 @@ export const BottomNavigation = LitReact.createComponent({ export { BottomNavigationActiveChangeEvent, - BottomNavigationElementClass, + BottomNavigationInput, BottomNavigationItemSlots, BottomNavigationSlots, }; diff --git a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts b/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts index e003027f..2790bb99 100644 --- a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts +++ b/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts @@ -1,7 +1,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; -import { BottomNavigationItem as BottomNavigationItemElementClass } from "@tapsioss/web-components"; +import { BottomNavigationItem as BottomNavigationItemInput } from "@tapsioss/web-components"; if ( typeof window !== "undefined" && @@ -16,7 +16,7 @@ if ( export const BottomNavigationItem = LitReact.createComponent({ tagName: "tapsi-bottom-navigation-item", - elementClass: BottomNavigationItemElementClass, + elementClass: BottomNavigationItemInput, react: React, events: {}, }); diff --git a/packages/react-components/src/BottomSheet/BottomSheet.ts b/packages/react-components/src/BottomSheet/BottomSheet.ts index cc70c17e..811c433b 100644 --- a/packages/react-components/src/BottomSheet/BottomSheet.ts +++ b/packages/react-components/src/BottomSheet/BottomSheet.ts @@ -4,8 +4,8 @@ import * as React from "react"; import { BottomSheetClosedEvent, BottomSheetClosingEvent, - BottomSheet as BottomSheetElementClass, BottomSheetHideEvent, + BottomSheet as BottomSheetInput, BottomSheetOpenedEvent, BottomSheetOpeningEvent, BottomSheetShowEvent, @@ -18,7 +18,7 @@ registerBottomSheet(); export const BottomSheet = LitReact.createComponent({ tagName: "tapsi-bottom-sheet", - elementClass: BottomSheetElementClass, + elementClass: BottomSheetInput, react: React, events: { onSnapped: "snapped" as LitReact.EventName, @@ -34,8 +34,8 @@ export const BottomSheet = LitReact.createComponent({ export { BottomSheetClosedEvent, BottomSheetClosingEvent, - BottomSheetElementClass, BottomSheetHideEvent, + BottomSheetInput, BottomSheetOpenedEvent, BottomSheetOpeningEvent, BottomSheetShowEvent, diff --git a/packages/react-components/src/Button/Button.ts b/packages/react-components/src/Button/Button.ts index ff97717d..f80f31da 100644 --- a/packages/react-components/src/Button/Button.ts +++ b/packages/react-components/src/Button/Button.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Button as ButtonElementClass, + Button as ButtonInput, ButtonSlots, registerButton, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerButton(); export const Button = LitReact.createComponent({ tagName: "tapsi-button", - elementClass: ButtonElementClass, + elementClass: ButtonInput, react: React, events: {}, }); -export { ButtonElementClass, ButtonSlots }; +export { ButtonInput, ButtonSlots }; diff --git a/packages/react-components/src/ButtonGroup/ButtonGroup.ts b/packages/react-components/src/ButtonGroup/ButtonGroup.ts index 8769ad09..aeb0121d 100644 --- a/packages/react-components/src/ButtonGroup/ButtonGroup.ts +++ b/packages/react-components/src/ButtonGroup/ButtonGroup.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - ButtonGroup as ButtonGroupElementClass, + ButtonGroup as ButtonGroupInput, ButtonGroupSlots, registerButtonGroup, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerButtonGroup(); export const ButtonGroup = LitReact.createComponent({ tagName: "tapsi-button-group", - elementClass: ButtonGroupElementClass, + elementClass: ButtonGroupInput, react: React, events: {}, }); -export { ButtonGroupElementClass, ButtonGroupSlots }; +export { ButtonGroupInput, ButtonGroupSlots }; diff --git a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts index 4fb225c9..89c72923 100644 --- a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts +++ b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - ChatBubbleIn as ChatBubbleInElementClass, + ChatBubbleIn as ChatBubbleInInput, ChatBubbleInSlots, registerChatBubbleIn, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerChatBubbleIn(); export const ChatBubbleIn = LitReact.createComponent({ tagName: "tapsi-chat-bubble-in", - elementClass: ChatBubbleInElementClass, + elementClass: ChatBubbleInInput, react: React, events: {}, }); -export { ChatBubbleInElementClass, ChatBubbleInSlots }; +export { ChatBubbleInInput, ChatBubbleInSlots }; diff --git a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts index 5ab4bb65..24863910 100644 --- a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts +++ b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - ChatBubbleOut as ChatBubbleOutElementClass, + ChatBubbleOut as ChatBubbleOutInput, ChatBubbleOutSlots, registerChatBubbleOut, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerChatBubbleOut(); export const ChatBubbleOut = LitReact.createComponent({ tagName: "tapsi-chat-bubble-out", - elementClass: ChatBubbleOutElementClass, + elementClass: ChatBubbleOutInput, react: React, events: {}, }); -export { ChatBubbleOutElementClass, ChatBubbleOutSlots }; +export { ChatBubbleOutInput, ChatBubbleOutSlots }; diff --git a/packages/react-components/src/Checkbox/Checkbox.ts b/packages/react-components/src/Checkbox/Checkbox.ts index c803bc0c..5c4695ae 100644 --- a/packages/react-components/src/Checkbox/Checkbox.ts +++ b/packages/react-components/src/Checkbox/Checkbox.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Checkbox as CheckboxElementClass, + Checkbox as CheckboxInput, registerCheckbox, } from "@tapsioss/web-components"; @@ -10,9 +10,9 @@ registerCheckbox(); export const Checkbox = LitReact.createComponent({ tagName: "tapsi-checkbox", - elementClass: CheckboxElementClass, + elementClass: CheckboxInput, react: React, events: { onChange: "input", onInput: "input" }, }); -export { CheckboxElementClass }; +export { CheckboxInput }; diff --git a/packages/react-components/src/Chip/Chip.ts b/packages/react-components/src/Chip/Chip.ts index ee6d39c6..3b2a8270 100644 --- a/packages/react-components/src/Chip/Chip.ts +++ b/packages/react-components/src/Chip/Chip.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { ChipDeselectEvent, - Chip as ChipElementClass, + Chip as ChipInput, ChipSelectEvent, ChipSlots, registerChip, @@ -13,7 +13,7 @@ registerChip(); export const Chip = LitReact.createComponent({ tagName: "tapsi-chip", - elementClass: ChipElementClass, + elementClass: ChipInput, react: React, events: { onSelect: "select" as LitReact.EventName, @@ -21,4 +21,4 @@ export const Chip = LitReact.createComponent({ }, }); -export { ChipDeselectEvent, ChipElementClass, ChipSelectEvent, ChipSlots }; +export { ChipDeselectEvent, ChipInput, ChipSelectEvent, ChipSlots }; diff --git a/packages/react-components/src/ChipGroup/ChipGroup.ts b/packages/react-components/src/ChipGroup/ChipGroup.ts index b1194a1d..1c1777e2 100644 --- a/packages/react-components/src/ChipGroup/ChipGroup.ts +++ b/packages/react-components/src/ChipGroup/ChipGroup.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - ChipGroup as ChipGroupElementClass, + ChipGroup as ChipGroupInput, ChipGroupSelectChangeEvent, ChipGroupSlots, registerChipGroup, @@ -12,7 +12,7 @@ registerChipGroup(); export const ChipGroup = LitReact.createComponent({ tagName: "tapsi-chip-group", - elementClass: ChipGroupElementClass, + elementClass: ChipGroupInput, react: React, events: { onSelectChange: @@ -20,4 +20,4 @@ export const ChipGroup = LitReact.createComponent({ }, }); -export { ChipGroupElementClass, ChipGroupSelectChangeEvent, ChipGroupSlots }; +export { ChipGroupInput, ChipGroupSelectChangeEvent, ChipGroupSlots }; diff --git a/packages/react-components/src/Divider/Divider.ts b/packages/react-components/src/Divider/Divider.ts index 0e22e619..daba60f0 100644 --- a/packages/react-components/src/Divider/Divider.ts +++ b/packages/react-components/src/Divider/Divider.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Divider as DividerElementClass, + Divider as DividerInput, registerDivider, } from "@tapsioss/web-components"; @@ -10,7 +10,7 @@ registerDivider(); export const Divider = LitReact.createComponent({ tagName: "tapsi-divider", - elementClass: DividerElementClass, + elementClass: DividerInput, react: React, events: {}, }); diff --git a/packages/react-components/src/EmptyState/EmptyState.ts b/packages/react-components/src/EmptyState/EmptyState.ts index 2022b796..9f6f9bca 100644 --- a/packages/react-components/src/EmptyState/EmptyState.ts +++ b/packages/react-components/src/EmptyState/EmptyState.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - EmptyState as EmptyStateElementClass, + EmptyState as EmptyStateInput, EmptyStateSlots, registerEmptyState, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerEmptyState(); export const EmptyState = LitReact.createComponent({ tagName: "tapsi-empty-state", - elementClass: EmptyStateElementClass, + elementClass: EmptyStateInput, react: React, events: {}, }); -export { EmptyStateElementClass, EmptyStateSlots }; +export { EmptyStateInput, EmptyStateSlots }; diff --git a/packages/react-components/src/FileInput/FileInput.ts b/packages/react-components/src/FileInput/FileInput.ts index 4b5e29b1..0fd51f57 100644 --- a/packages/react-components/src/FileInput/FileInput.ts +++ b/packages/react-components/src/FileInput/FileInput.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - FileInput as FileInputElementClass, + FileInput as FileInputInput, FileInputRetryEvent, FileInputSlots, registerFileInput, @@ -12,7 +12,7 @@ registerFileInput(); export const FileInput = LitReact.createComponent({ tagName: "tapsi-file-input", - elementClass: FileInputElementClass, + elementClass: FileInputInput, react: React, events: { onRetry: "retry" as LitReact.EventName, @@ -21,4 +21,4 @@ export const FileInput = LitReact.createComponent({ }, }); -export { FileInputElementClass, FileInputRetryEvent, FileInputSlots }; +export { FileInputInput, FileInputRetryEvent, FileInputSlots }; diff --git a/packages/react-components/src/IconButton/IconButton.ts b/packages/react-components/src/IconButton/IconButton.ts index 594f86ff..464a7e06 100644 --- a/packages/react-components/src/IconButton/IconButton.ts +++ b/packages/react-components/src/IconButton/IconButton.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - IconButton as IconButtonElementClass, + IconButton as IconButtonInput, IconButtonSlots, registerIconButton, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerIconButton(); export const IconButton = LitReact.createComponent({ tagName: "tapsi-icon-button", - elementClass: IconButtonElementClass, + elementClass: IconButtonInput, react: React, events: {}, }); -export { IconButtonElementClass, IconButtonSlots }; +export { IconButtonInput, IconButtonSlots }; diff --git a/packages/react-components/src/Modal/Modal.ts b/packages/react-components/src/Modal/Modal.ts index f35b43c0..946c8e42 100644 --- a/packages/react-components/src/Modal/Modal.ts +++ b/packages/react-components/src/Modal/Modal.ts @@ -2,8 +2,8 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Modal as ModalElementClass, ModalHideEvent, + Modal as ModalInput, ModalShowEvent, ModalSlots, registerModal, @@ -13,7 +13,7 @@ registerModal(); export const Modal = LitReact.createComponent({ tagName: "tapsi-modal", - elementClass: ModalElementClass, + elementClass: ModalInput, react: React, events: { onShow: "show" as LitReact.EventName, @@ -21,4 +21,4 @@ export const Modal = LitReact.createComponent({ }, }); -export { ModalElementClass, ModalHideEvent, ModalShowEvent, ModalSlots }; +export { ModalHideEvent, ModalInput, ModalShowEvent, ModalSlots }; diff --git a/packages/react-components/src/Notice/Notice.ts b/packages/react-components/src/Notice/Notice.ts index 71677cef..f18acc60 100644 --- a/packages/react-components/src/Notice/Notice.ts +++ b/packages/react-components/src/Notice/Notice.ts @@ -2,8 +2,8 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Notice as NoticeElementClass, NoticeHideEvent, + Notice as NoticeInput, NoticeShowEvent, NoticeSlots, registerNotice, @@ -13,7 +13,7 @@ registerNotice(); export const Notice = LitReact.createComponent({ tagName: "tapsi-notice", - elementClass: NoticeElementClass, + elementClass: NoticeInput, react: React, events: { onShow: "show" as LitReact.EventName, @@ -21,4 +21,4 @@ export const Notice = LitReact.createComponent({ }, }); -export { NoticeElementClass, NoticeHideEvent, NoticeShowEvent, NoticeSlots }; +export { NoticeHideEvent, NoticeInput, NoticeShowEvent, NoticeSlots }; diff --git a/packages/react-components/src/PinInput/PinInput.ts b/packages/react-components/src/PinInput/PinInput.ts index 540bea0e..5bb982a2 100644 --- a/packages/react-components/src/PinInput/PinInput.ts +++ b/packages/react-components/src/PinInput/PinInput.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { PinInputCompleteEvent, - PinInput as PinInputElementClass, + PinInput as PinInputInput, registerPinInput, } from "@tapsioss/web-components"; @@ -11,7 +11,7 @@ registerPinInput(); export const PinInput = LitReact.createComponent({ tagName: "tapsi-pin-input", - elementClass: PinInputElementClass, + elementClass: PinInputInput, react: React, events: { onComplete: "complete" as LitReact.EventName, @@ -20,4 +20,4 @@ export const PinInput = LitReact.createComponent({ }, }); -export { PinInputCompleteEvent, PinInputElementClass }; +export { PinInputCompleteEvent, PinInputInput }; diff --git a/packages/react-components/src/Pinwheel/Pinwheel.ts b/packages/react-components/src/Pinwheel/Pinwheel.ts index 3d48c6cf..bacbe4fb 100644 --- a/packages/react-components/src/Pinwheel/Pinwheel.ts +++ b/packages/react-components/src/Pinwheel/Pinwheel.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Pinwheel as PinwheelElementClass, + Pinwheel as PinwheelInput, PinwheelItemSlots, PinwheelSlots, registerPinwheel, @@ -12,9 +12,9 @@ registerPinwheel(); export const Pinwheel = LitReact.createComponent({ tagName: "tapsi-pinwheel", - elementClass: PinwheelElementClass, + elementClass: PinwheelInput, react: React, events: { onChange: "change", onInput: "change" }, }); -export { PinwheelElementClass, PinwheelItemSlots, PinwheelSlots }; +export { PinwheelInput, PinwheelItemSlots, PinwheelSlots }; diff --git a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts index 10c8f726..a17bf715 100644 --- a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts +++ b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - PinwheelGroup as PinwheelGroupElementClass, + PinwheelGroup as PinwheelGroupInput, PinwheelGroupSlots, registerPinwheelGroup, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerPinwheelGroup(); export const PinwheelGroup = LitReact.createComponent({ tagName: "tapsi-pinwheel-group", - elementClass: PinwheelGroupElementClass, + elementClass: PinwheelGroupInput, react: React, events: {}, }); -export { PinwheelGroupElementClass, PinwheelGroupSlots }; +export { PinwheelGroupInput, PinwheelGroupSlots }; diff --git a/packages/react-components/src/PinwheelItem/PinwheelItem.ts b/packages/react-components/src/PinwheelItem/PinwheelItem.ts index b03bf63b..8fdc7d60 100644 --- a/packages/react-components/src/PinwheelItem/PinwheelItem.ts +++ b/packages/react-components/src/PinwheelItem/PinwheelItem.ts @@ -1,7 +1,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; -import { PinwheelItem as PinwheelItemElementClass } from "@tapsioss/web-components"; +import { PinwheelItem as PinwheelItemInput } from "@tapsioss/web-components"; if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) { /* eslint-disable no-console */ @@ -13,7 +13,7 @@ if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) { export const PinwheelItem = LitReact.createComponent({ tagName: "tapsi-pinwheel-item", - elementClass: PinwheelItemElementClass, + elementClass: PinwheelItemInput, react: React, events: {}, }); diff --git a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts index e6fd8bd6..c7911600 100644 --- a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts +++ b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - ProgressIndicator as ProgressIndicatorElementClass, + ProgressIndicator as ProgressIndicatorInput, registerProgressIndicator, } from "@tapsioss/web-components"; @@ -10,7 +10,7 @@ registerProgressIndicator(); export const ProgressIndicator = LitReact.createComponent({ tagName: "tapsi-progress-indicator", - elementClass: ProgressIndicatorElementClass, + elementClass: ProgressIndicatorInput, react: React, events: {}, }); diff --git a/packages/react-components/src/Radio/Radio.ts b/packages/react-components/src/Radio/Radio.ts index 1158dec1..0efadb9a 100644 --- a/packages/react-components/src/Radio/Radio.ts +++ b/packages/react-components/src/Radio/Radio.ts @@ -1,18 +1,15 @@ import * as LitReact from "@lit/react"; import * as React from "react"; -import { - Radio as RadioElementClass, - registerRadio, -} from "@tapsioss/web-components"; +import { Radio as RadioInput, registerRadio } from "@tapsioss/web-components"; registerRadio(); export const Radio = LitReact.createComponent({ tagName: "tapsi-radio", - elementClass: RadioElementClass, + elementClass: RadioInput, react: React, events: { onChange: "input", onInput: "input" }, }); -export { RadioElementClass }; +export { RadioInput }; diff --git a/packages/react-components/src/RateSlider/RateSlider.ts b/packages/react-components/src/RateSlider/RateSlider.ts index a1a4a2b3..0a0ba7b4 100644 --- a/packages/react-components/src/RateSlider/RateSlider.ts +++ b/packages/react-components/src/RateSlider/RateSlider.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - RateSlider as RateSliderElementClass, + RateSlider as RateSliderInput, registerRateSlider, } from "@tapsioss/web-components"; @@ -10,9 +10,9 @@ registerRateSlider(); export const RateSlider = LitReact.createComponent({ tagName: "tapsi-rate-slider", - elementClass: RateSliderElementClass, + elementClass: RateSliderInput, react: React, events: { onChange: "change", onInput: "change" }, }); -export { RateSliderElementClass }; +export { RateSliderInput }; diff --git a/packages/react-components/src/SegmentedView/SegmentedView.ts b/packages/react-components/src/SegmentedView/SegmentedView.ts index 8a780761..e0fed81c 100644 --- a/packages/react-components/src/SegmentedView/SegmentedView.ts +++ b/packages/react-components/src/SegmentedView/SegmentedView.ts @@ -4,7 +4,7 @@ import * as React from "react"; import { registerSegmentedView, SegmentedViewActiveChangeEvent, - SegmentedView as SegmentedViewElementClass, + SegmentedView as SegmentedViewInput, SegmentedViewItemSlots, SegmentedViewSlots, } from "@tapsioss/web-components"; @@ -13,7 +13,7 @@ registerSegmentedView(); export const SegmentedView = LitReact.createComponent({ tagName: "tapsi-segmented-view", - elementClass: SegmentedViewElementClass, + elementClass: SegmentedViewInput, react: React, events: { onActiveChange: @@ -23,7 +23,7 @@ export const SegmentedView = LitReact.createComponent({ export { SegmentedViewActiveChangeEvent, - SegmentedViewElementClass, + SegmentedViewInput, SegmentedViewItemSlots, SegmentedViewSlots, }; diff --git a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts index 015a2ba3..0e5dac0b 100644 --- a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts +++ b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts @@ -1,7 +1,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; -import { SegmentedViewItem as SegmentedViewItemElementClass } from "@tapsioss/web-components"; +import { SegmentedViewItem as SegmentedViewItemInput } from "@tapsioss/web-components"; if ( typeof window !== "undefined" && @@ -16,7 +16,7 @@ if ( export const SegmentedViewItem = LitReact.createComponent({ tagName: "tapsi-segmented-view-item", - elementClass: SegmentedViewItemElementClass, + elementClass: SegmentedViewItemInput, react: React, events: {}, }); diff --git a/packages/react-components/src/Skeleton/Skeleton.ts b/packages/react-components/src/Skeleton/Skeleton.ts index 937d0a5d..c405b4bb 100644 --- a/packages/react-components/src/Skeleton/Skeleton.ts +++ b/packages/react-components/src/Skeleton/Skeleton.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { registerSkeleton, - Skeleton as SkeletonElementClass, + Skeleton as SkeletonInput, SkeletonSlots, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerSkeleton(); export const Skeleton = LitReact.createComponent({ tagName: "tapsi-skeleton", - elementClass: SkeletonElementClass, + elementClass: SkeletonInput, react: React, events: {}, }); -export { SkeletonElementClass, SkeletonSlots }; +export { SkeletonInput, SkeletonSlots }; diff --git a/packages/react-components/src/Snackbar/Snackbar.ts b/packages/react-components/src/Snackbar/Snackbar.ts index c50bc899..6e75c3f0 100644 --- a/packages/react-components/src/Snackbar/Snackbar.ts +++ b/packages/react-components/src/Snackbar/Snackbar.ts @@ -3,8 +3,8 @@ import * as React from "react"; import { registerSnackbar, - Snackbar as SnackbarElementClass, SnackbarHideEvent, + Snackbar as SnackbarInput, SnackbarShowEvent, SnackbarSlots, } from "@tapsioss/web-components"; @@ -13,7 +13,7 @@ registerSnackbar(); export const Snackbar = LitReact.createComponent({ tagName: "tapsi-snackbar", - elementClass: SnackbarElementClass, + elementClass: SnackbarInput, react: React, events: { onShow: "show" as LitReact.EventName, @@ -21,9 +21,4 @@ export const Snackbar = LitReact.createComponent({ }, }); -export { - SnackbarElementClass, - SnackbarHideEvent, - SnackbarShowEvent, - SnackbarSlots, -}; +export { SnackbarHideEvent, SnackbarInput, SnackbarShowEvent, SnackbarSlots }; diff --git a/packages/react-components/src/Spinner/Spinner.ts b/packages/react-components/src/Spinner/Spinner.ts index ef3cefe6..49d64b4f 100644 --- a/packages/react-components/src/Spinner/Spinner.ts +++ b/packages/react-components/src/Spinner/Spinner.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Spinner as SpinnerElementClass, + Spinner as SpinnerInput, registerSpinner, } from "@tapsioss/web-components"; @@ -10,7 +10,7 @@ registerSpinner(); export const Spinner = LitReact.createComponent({ tagName: "tapsi-spinner", - elementClass: SpinnerElementClass, + elementClass: SpinnerInput, react: React, events: {}, }); diff --git a/packages/react-components/src/Stepper/Stepper.ts b/packages/react-components/src/Stepper/Stepper.ts index da3dc392..efcc8194 100644 --- a/packages/react-components/src/Stepper/Stepper.ts +++ b/packages/react-components/src/Stepper/Stepper.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Stepper as StepperElementClass, + Stepper as StepperInput, registerStepper, } from "@tapsioss/web-components"; @@ -10,9 +10,9 @@ registerStepper(); export const Stepper = LitReact.createComponent({ tagName: "tapsi-stepper", - elementClass: StepperElementClass, + elementClass: StepperInput, react: React, events: { onChange: "change", onInput: "change" }, }); -export { StepperElementClass }; +export { StepperInput }; diff --git a/packages/react-components/src/Switch/Switch.ts b/packages/react-components/src/Switch/Switch.ts index 7de83924..c9a37ddb 100644 --- a/packages/react-components/src/Switch/Switch.ts +++ b/packages/react-components/src/Switch/Switch.ts @@ -2,7 +2,7 @@ import * as LitReact from "@lit/react"; import * as React from "react"; import { - Switch as SwitchElementClass, + Switch as SwitchInput, registerSwitch, } from "@tapsioss/web-components"; @@ -10,9 +10,9 @@ registerSwitch(); export const Switch = LitReact.createComponent({ tagName: "tapsi-switch", - elementClass: SwitchElementClass, + elementClass: SwitchInput, react: React, events: { onChange: "input", onInput: "input" }, }); -export { SwitchElementClass }; +export { SwitchInput }; diff --git a/packages/react-components/src/TextArea/TextArea.ts b/packages/react-components/src/TextArea/TextArea.ts index e0547bec..1d10663a 100644 --- a/packages/react-components/src/TextArea/TextArea.ts +++ b/packages/react-components/src/TextArea/TextArea.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { registerTextArea, - TextArea as TextAreaElementClass, + TextArea as TextAreaInput, TextAreaSlots, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerTextArea(); export const TextArea = LitReact.createComponent({ tagName: "tapsi-text-area", - elementClass: TextAreaElementClass, + elementClass: TextAreaInput, react: React, events: { onChange: "input", onInput: "input" }, }); -export { TextAreaElementClass, TextAreaSlots }; +export { TextAreaInput, TextAreaSlots }; diff --git a/packages/react-components/src/TextField/TextField.ts b/packages/react-components/src/TextField/TextField.ts index 9f6941ab..2063d95b 100644 --- a/packages/react-components/src/TextField/TextField.ts +++ b/packages/react-components/src/TextField/TextField.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { registerTextField, - TextField as TextFieldElementClass, + TextField as TextFieldInput, TextFieldSlots, } from "@tapsioss/web-components"; @@ -11,9 +11,9 @@ registerTextField(); export const TextField = LitReact.createComponent({ tagName: "tapsi-text-field", - elementClass: TextFieldElementClass, + elementClass: TextFieldInput, react: React, events: { onChange: "input", onInput: "input" }, }); -export { TextFieldElementClass, TextFieldSlots }; +export { TextFieldInput, TextFieldSlots }; diff --git a/packages/react-components/src/Tooltip/Tooltip.ts b/packages/react-components/src/Tooltip/Tooltip.ts index 33d1a321..9a799bab 100644 --- a/packages/react-components/src/Tooltip/Tooltip.ts +++ b/packages/react-components/src/Tooltip/Tooltip.ts @@ -3,8 +3,8 @@ import * as React from "react"; import { registerTooltip, - Tooltip as TooltipElementClass, TooltipHideEvent, + Tooltip as TooltipInput, TooltipShowEvent, } from "@tapsioss/web-components"; @@ -12,7 +12,7 @@ registerTooltip(); export const Tooltip = LitReact.createComponent({ tagName: "tapsi-tooltip", - elementClass: TooltipElementClass, + elementClass: TooltipInput, react: React, events: { onShow: "show" as LitReact.EventName, @@ -20,4 +20,4 @@ export const Tooltip = LitReact.createComponent({ }, }); -export { TooltipElementClass, TooltipHideEvent, TooltipShowEvent }; +export { TooltipHideEvent, TooltipInput, TooltipShowEvent }; From 7b75efd59bbfe0838f281ffffb3a0278525a7851 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sat, 3 May 2025 17:26:55 +0330 Subject: [PATCH 4/5] refactor: update types --- packages/react-components/scripts/generate.ts | 56 ++++++++++++++++--- .../react-components/src/Avatar/Avatar.ts | 10 ++-- packages/react-components/src/Badge/Badge.ts | 10 ++-- .../src/BadgeWrapper/BadgeWrapper.ts | 19 ++++--- .../react-components/src/Banner/Banner.ts | 10 ++-- .../src/BottomNavigation/BottomNavigation.ts | 19 +++++-- .../BottomNavigationItem.ts | 17 +++--- .../src/BottomSheet/BottomSheet.ts | 39 +++++++++---- .../react-components/src/Button/Button.ts | 10 ++-- .../src/ButtonGroup/ButtonGroup.ts | 19 ++++--- .../src/ChatBubbleIn/ChatBubbleIn.ts | 19 ++++--- .../src/ChatBubbleOut/ChatBubbleOut.ts | 19 ++++--- .../react-components/src/Checkbox/Checkbox.ts | 13 +++-- packages/react-components/src/Chip/Chip.ts | 24 +++++--- .../src/ChipGroup/ChipGroup.ts | 20 ++++--- .../react-components/src/Divider/Divider.ts | 8 +-- .../src/EmptyState/EmptyState.ts | 20 ++++--- .../src/FileInput/FileInput.ts | 19 +++++-- .../src/IconButton/IconButton.ts | 20 ++++--- packages/react-components/src/Modal/Modal.ts | 21 ++++--- .../react-components/src/Notice/Notice.ts | 21 ++++--- .../react-components/src/PinInput/PinInput.ts | 23 ++++++-- .../react-components/src/Pinwheel/Pinwheel.ts | 13 +++-- .../src/PinwheelGroup/PinwheelGroup.ts | 19 ++++--- .../src/PinwheelItem/PinwheelItem.ts | 17 +++--- .../ProgressIndicator/ProgressIndicator.ts | 17 +++--- packages/react-components/src/Radio/Radio.ts | 13 +++-- .../src/RateSlider/RateSlider.ts | 13 +++-- .../src/SegmentedView/SegmentedView.ts | 20 ++++--- .../SegmentedViewItem/SegmentedViewItem.ts | 17 +++--- .../react-components/src/Skeleton/Skeleton.ts | 10 ++-- .../react-components/src/Snackbar/Snackbar.ts | 21 ++++--- .../react-components/src/Spinner/Spinner.ts | 8 +-- .../react-components/src/Stepper/Stepper.ts | 13 +++-- .../react-components/src/Switch/Switch.ts | 13 +++-- .../react-components/src/TextArea/TextArea.ts | 13 +++-- .../src/TextField/TextField.ts | 13 +++-- .../react-components/src/Tooltip/Tooltip.ts | 21 ++++--- .../react-components/templates/component.txt | 2 +- 39 files changed, 423 insertions(+), 256 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index d6fb3894..ad94d42d 100644 --- a/packages/react-components/scripts/generate.ts +++ b/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,7 +132,7 @@ const createReactMetadata = ( e.endsWith("Slots"), ); - const inputClassName = elementClassName.replace("ElementClass", "Input"); + const inputClassName = elementClassName.replace("ElementClass", "Element"); return { elementClass: inputClassName, @@ -150,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"); }; @@ -185,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(",") || "" @@ -198,10 +195,10 @@ const getReactComponentCode = async ( const exports = exportsList.length > 0 - ? `export { ${[`${componentName}Input`, ...exportsList.filter(Boolean)].join(", ")} };` + ? `export { ${[`${componentName}Element`, ...exportsList.filter(Boolean)].join(", ")} };` : ""; - const elementClass = `${componentName}Input`; + const elementClass = `${componentName}Element`; const importsList = [ `${rawElementClass} as ${elementClass}`, registerFunction, @@ -215,12 +212,55 @@ 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 */}`; + let componentTypeEvents; + + if ((_events ?? [])?.length === 0) { + componentTypeEvents = "object"; + } else { + componentTypeEvents = `{ ${ + _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(",") || "" + } }`; + } + + 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, diff --git a/packages/react-components/src/Avatar/Avatar.ts b/packages/react-components/src/Avatar/Avatar.ts index 16908a10..254c97fb 100644 --- a/packages/react-components/src/Avatar/Avatar.ts +++ b/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 AvatarInput, + Avatar as AvatarElement, AvatarSlots, registerAvatar, } from "@tapsioss/web-components"; registerAvatar(); -export const Avatar = LitReact.createComponent({ +export const Avatar: ReactWebComponent = createComponent({ tagName: "tapsi-avatar", - elementClass: AvatarInput, + elementClass: AvatarElement, react: React, events: {}, }); -export { AvatarInput, AvatarSlots }; +export { AvatarElement, AvatarSlots }; diff --git a/packages/react-components/src/Badge/Badge.ts b/packages/react-components/src/Badge/Badge.ts index 42fc2c1e..cfad2f1c 100644 --- a/packages/react-components/src/Badge/Badge.ts +++ b/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 BadgeInput, + Badge as BadgeElement, BadgeSlots, registerBadge, } from "@tapsioss/web-components"; registerBadge(); -export const Badge = LitReact.createComponent({ +export const Badge: ReactWebComponent = createComponent({ tagName: "tapsi-badge", - elementClass: BadgeInput, + elementClass: BadgeElement, react: React, events: {}, }); -export { BadgeInput, BadgeSlots }; +export { BadgeElement, BadgeSlots }; diff --git a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts index 565afde6..46b92be7 100644 --- a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts +++ b/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 BadgeWrapperInput, + BadgeWrapper as BadgeWrapperElement, BadgeWrapperSlots, registerBadgeWrapper, } from "@tapsioss/web-components"; registerBadgeWrapper(); -export const BadgeWrapper = LitReact.createComponent({ - tagName: "tapsi-badge-wrapper", - elementClass: BadgeWrapperInput, - react: React, - events: {}, -}); +export const BadgeWrapper: ReactWebComponent = + createComponent({ + tagName: "tapsi-badge-wrapper", + elementClass: BadgeWrapperElement, + react: React, + events: {}, + }); -export { BadgeWrapperInput, BadgeWrapperSlots }; +export { BadgeWrapperElement, BadgeWrapperSlots }; diff --git a/packages/react-components/src/Banner/Banner.ts b/packages/react-components/src/Banner/Banner.ts index 6381d74e..a71acf73 100644 --- a/packages/react-components/src/Banner/Banner.ts +++ b/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 BannerInput, + Banner as BannerElement, BannerSlots, registerBanner, } from "@tapsioss/web-components"; registerBanner(); -export const Banner = LitReact.createComponent({ +export const Banner: ReactWebComponent = createComponent({ tagName: "tapsi-banner", - elementClass: BannerInput, + elementClass: BannerElement, react: React, events: {}, }); -export { BannerInput, BannerSlots }; +export { BannerElement, BannerSlots }; diff --git a/packages/react-components/src/BottomNavigation/BottomNavigation.ts b/packages/react-components/src/BottomNavigation/BottomNavigation.ts index ee340d6d..5b00ea42 100644 --- a/packages/react-components/src/BottomNavigation/BottomNavigation.ts +++ b/packages/react-components/src/BottomNavigation/BottomNavigation.ts @@ -1,9 +1,13 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { BottomNavigationActiveChangeEvent, - BottomNavigation as BottomNavigationInput, + BottomNavigation as BottomNavigationElement, BottomNavigationItemSlots, BottomNavigationSlots, registerBottomNavigation, @@ -11,19 +15,22 @@ import { registerBottomNavigation(); -export const BottomNavigation = LitReact.createComponent({ +export const BottomNavigation: ReactWebComponent< + BottomNavigationElement, + { onActiveChange: EventName } +> = createComponent({ tagName: "tapsi-bottom-navigation", - elementClass: BottomNavigationInput, + elementClass: BottomNavigationElement, react: React, events: { onActiveChange: - "activechange" as LitReact.EventName, + "activechange" as EventName, }, }); export { BottomNavigationActiveChangeEvent, - BottomNavigationInput, + BottomNavigationElement, BottomNavigationItemSlots, BottomNavigationSlots, }; diff --git a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts b/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts index 2790bb99..ac4db90c 100644 --- a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts +++ b/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 BottomNavigationItemInput } 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: BottomNavigationItemInput, - react: React, - events: {}, -}); +export const BottomNavigationItem: ReactWebComponent = + createComponent({ + tagName: "tapsi-bottom-navigation-item", + elementClass: BottomNavigationItemElement, + react: React, + events: {}, + }); diff --git a/packages/react-components/src/BottomSheet/BottomSheet.ts b/packages/react-components/src/BottomSheet/BottomSheet.ts index 811c433b..45334eaa 100644 --- a/packages/react-components/src/BottomSheet/BottomSheet.ts +++ b/packages/react-components/src/BottomSheet/BottomSheet.ts @@ -1,11 +1,15 @@ -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 BottomSheetElement, BottomSheetHideEvent, - BottomSheet as BottomSheetInput, BottomSheetOpenedEvent, BottomSheetOpeningEvent, BottomSheetShowEvent, @@ -16,26 +20,37 @@ import { registerBottomSheet(); -export const BottomSheet = LitReact.createComponent({ +export const BottomSheet: ReactWebComponent< + BottomSheetElement, + { + onSnapped: EventName; + onOpening: EventName; + onClosing: EventName; + onOpened: EventName; + onClosed: EventName; + onHide: EventName; + onShow: EventName; + } +> = createComponent({ tagName: "tapsi-bottom-sheet", - elementClass: BottomSheetInput, + elementClass: BottomSheetElement, react: React, events: { - onSnapped: "snapped" as LitReact.EventName, - onOpening: "opening" as LitReact.EventName, - onClosing: "closing" as LitReact.EventName, - onOpened: "opened" as LitReact.EventName, - onClosed: "closed" as LitReact.EventName, - onHide: "hide" as LitReact.EventName, - onShow: "show" as LitReact.EventName, + onSnapped: "snapped" as EventName, + onOpening: "opening" as EventName, + onClosing: "closing" as EventName, + onOpened: "opened" as EventName, + onClosed: "closed" as EventName, + onHide: "hide" as EventName, + onShow: "show" as EventName, }, }); export { BottomSheetClosedEvent, BottomSheetClosingEvent, + BottomSheetElement, BottomSheetHideEvent, - BottomSheetInput, BottomSheetOpenedEvent, BottomSheetOpeningEvent, BottomSheetShowEvent, diff --git a/packages/react-components/src/Button/Button.ts b/packages/react-components/src/Button/Button.ts index f80f31da..7847ecd8 100644 --- a/packages/react-components/src/Button/Button.ts +++ b/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 ButtonInput, + Button as ButtonElement, ButtonSlots, registerButton, } from "@tapsioss/web-components"; registerButton(); -export const Button = LitReact.createComponent({ +export const Button: ReactWebComponent = createComponent({ tagName: "tapsi-button", - elementClass: ButtonInput, + elementClass: ButtonElement, react: React, events: {}, }); -export { ButtonInput, ButtonSlots }; +export { ButtonElement, ButtonSlots }; diff --git a/packages/react-components/src/ButtonGroup/ButtonGroup.ts b/packages/react-components/src/ButtonGroup/ButtonGroup.ts index aeb0121d..4416f1d4 100644 --- a/packages/react-components/src/ButtonGroup/ButtonGroup.ts +++ b/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 ButtonGroupInput, + ButtonGroup as ButtonGroupElement, ButtonGroupSlots, registerButtonGroup, } from "@tapsioss/web-components"; registerButtonGroup(); -export const ButtonGroup = LitReact.createComponent({ - tagName: "tapsi-button-group", - elementClass: ButtonGroupInput, - react: React, - events: {}, -}); +export const ButtonGroup: ReactWebComponent = + createComponent({ + tagName: "tapsi-button-group", + elementClass: ButtonGroupElement, + react: React, + events: {}, + }); -export { ButtonGroupInput, ButtonGroupSlots }; +export { ButtonGroupElement, ButtonGroupSlots }; diff --git a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts index 89c72923..03fcc561 100644 --- a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts +++ b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts @@ -1,19 +1,20 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - ChatBubbleIn as ChatBubbleInInput, + ChatBubbleIn as ChatBubbleInElement, ChatBubbleInSlots, registerChatBubbleIn, } from "@tapsioss/web-components"; registerChatBubbleIn(); -export const ChatBubbleIn = LitReact.createComponent({ - tagName: "tapsi-chat-bubble-in", - elementClass: ChatBubbleInInput, - react: React, - events: {}, -}); +export const ChatBubbleIn: ReactWebComponent = + createComponent({ + tagName: "tapsi-chat-bubble-in", + elementClass: ChatBubbleInElement, + react: React, + events: {}, + }); -export { ChatBubbleInInput, ChatBubbleInSlots }; +export { ChatBubbleInElement, ChatBubbleInSlots }; diff --git a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts index 24863910..f102358c 100644 --- a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts +++ b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts @@ -1,19 +1,20 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - ChatBubbleOut as ChatBubbleOutInput, + ChatBubbleOut as ChatBubbleOutElement, ChatBubbleOutSlots, registerChatBubbleOut, } from "@tapsioss/web-components"; registerChatBubbleOut(); -export const ChatBubbleOut = LitReact.createComponent({ - tagName: "tapsi-chat-bubble-out", - elementClass: ChatBubbleOutInput, - react: React, - events: {}, -}); +export const ChatBubbleOut: ReactWebComponent = + createComponent({ + tagName: "tapsi-chat-bubble-out", + elementClass: ChatBubbleOutElement, + react: React, + events: {}, + }); -export { ChatBubbleOutInput, ChatBubbleOutSlots }; +export { ChatBubbleOutElement, ChatBubbleOutSlots }; diff --git a/packages/react-components/src/Checkbox/Checkbox.ts b/packages/react-components/src/Checkbox/Checkbox.ts index 5c4695ae..bcff3dc2 100644 --- a/packages/react-components/src/Checkbox/Checkbox.ts +++ b/packages/react-components/src/Checkbox/Checkbox.ts @@ -1,18 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Checkbox as CheckboxInput, + Checkbox as CheckboxElement, registerCheckbox, } from "@tapsioss/web-components"; registerCheckbox(); -export const Checkbox = LitReact.createComponent({ +export const Checkbox: ReactWebComponent< + CheckboxElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-checkbox", - elementClass: CheckboxInput, + elementClass: CheckboxElement, react: React, events: { onChange: "input", onInput: "input" }, }); -export { CheckboxInput }; +export { CheckboxElement }; diff --git a/packages/react-components/src/Chip/Chip.ts b/packages/react-components/src/Chip/Chip.ts index 3b2a8270..1beb520d 100644 --- a/packages/react-components/src/Chip/Chip.ts +++ b/packages/react-components/src/Chip/Chip.ts @@ -1,9 +1,13 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { ChipDeselectEvent, - Chip as ChipInput, + Chip as ChipElement, ChipSelectEvent, ChipSlots, registerChip, @@ -11,14 +15,20 @@ import { registerChip(); -export const Chip = LitReact.createComponent({ +export const Chip: ReactWebComponent< + ChipElement, + { + onSelect: EventName; + onDeselect: EventName; + } +> = createComponent({ tagName: "tapsi-chip", - elementClass: ChipInput, + elementClass: ChipElement, react: React, events: { - onSelect: "select" as LitReact.EventName, - onDeselect: "deselect" as LitReact.EventName, + onSelect: "select" as EventName, + onDeselect: "deselect" as EventName, }, }); -export { ChipDeselectEvent, ChipInput, ChipSelectEvent, ChipSlots }; +export { ChipDeselectEvent, ChipElement, ChipSelectEvent, ChipSlots }; diff --git a/packages/react-components/src/ChipGroup/ChipGroup.ts b/packages/react-components/src/ChipGroup/ChipGroup.ts index 1c1777e2..44e6e2a9 100644 --- a/packages/react-components/src/ChipGroup/ChipGroup.ts +++ b/packages/react-components/src/ChipGroup/ChipGroup.ts @@ -1,8 +1,12 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { - ChipGroup as ChipGroupInput, + ChipGroup as ChipGroupElement, ChipGroupSelectChangeEvent, ChipGroupSlots, registerChipGroup, @@ -10,14 +14,16 @@ import { registerChipGroup(); -export const ChipGroup = LitReact.createComponent({ +export const ChipGroup: ReactWebComponent< + ChipGroupElement, + { onSelectChange: EventName } +> = createComponent({ tagName: "tapsi-chip-group", - elementClass: ChipGroupInput, + elementClass: ChipGroupElement, react: React, events: { - onSelectChange: - "selectchange" as LitReact.EventName, + onSelectChange: "selectchange" as EventName, }, }); -export { ChipGroupInput, ChipGroupSelectChangeEvent, ChipGroupSlots }; +export { ChipGroupElement, ChipGroupSelectChangeEvent, ChipGroupSlots }; diff --git a/packages/react-components/src/Divider/Divider.ts b/packages/react-components/src/Divider/Divider.ts index daba60f0..44c9d52b 100644 --- a/packages/react-components/src/Divider/Divider.ts +++ b/packages/react-components/src/Divider/Divider.ts @@ -1,16 +1,16 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Divider as DividerInput, + Divider as DividerElement, registerDivider, } from "@tapsioss/web-components"; registerDivider(); -export const Divider = LitReact.createComponent({ +export const Divider: ReactWebComponent = createComponent({ tagName: "tapsi-divider", - elementClass: DividerInput, + elementClass: DividerElement, react: React, events: {}, }); diff --git a/packages/react-components/src/EmptyState/EmptyState.ts b/packages/react-components/src/EmptyState/EmptyState.ts index 9f6f9bca..ff5fb2ee 100644 --- a/packages/react-components/src/EmptyState/EmptyState.ts +++ b/packages/react-components/src/EmptyState/EmptyState.ts @@ -1,19 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - EmptyState as EmptyStateInput, + EmptyState as EmptyStateElement, EmptyStateSlots, registerEmptyState, } from "@tapsioss/web-components"; registerEmptyState(); -export const EmptyState = LitReact.createComponent({ - tagName: "tapsi-empty-state", - elementClass: EmptyStateInput, - react: React, - events: {}, -}); +export const EmptyState: ReactWebComponent = createComponent( + { + tagName: "tapsi-empty-state", + elementClass: EmptyStateElement, + react: React, + events: {}, + }, +); -export { EmptyStateInput, EmptyStateSlots }; +export { EmptyStateElement, EmptyStateSlots }; diff --git a/packages/react-components/src/FileInput/FileInput.ts b/packages/react-components/src/FileInput/FileInput.ts index 0fd51f57..ad43921d 100644 --- a/packages/react-components/src/FileInput/FileInput.ts +++ b/packages/react-components/src/FileInput/FileInput.ts @@ -1,8 +1,12 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { - FileInput as FileInputInput, + FileInput as FileInputElement, FileInputRetryEvent, FileInputSlots, registerFileInput, @@ -10,15 +14,18 @@ import { registerFileInput(); -export const FileInput = LitReact.createComponent({ +export const FileInput: ReactWebComponent< + FileInputElement, + { onRetry: EventName; onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-file-input", - elementClass: FileInputInput, + elementClass: FileInputElement, react: React, events: { - onRetry: "retry" as LitReact.EventName, + onRetry: "retry" as EventName, onChange: "input", onInput: "input", }, }); -export { FileInputInput, FileInputRetryEvent, FileInputSlots }; +export { FileInputElement, FileInputRetryEvent, FileInputSlots }; diff --git a/packages/react-components/src/IconButton/IconButton.ts b/packages/react-components/src/IconButton/IconButton.ts index 464a7e06..b1fccf21 100644 --- a/packages/react-components/src/IconButton/IconButton.ts +++ b/packages/react-components/src/IconButton/IconButton.ts @@ -1,19 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - IconButton as IconButtonInput, + IconButton as IconButtonElement, IconButtonSlots, registerIconButton, } from "@tapsioss/web-components"; registerIconButton(); -export const IconButton = LitReact.createComponent({ - tagName: "tapsi-icon-button", - elementClass: IconButtonInput, - react: React, - events: {}, -}); +export const IconButton: ReactWebComponent = createComponent( + { + tagName: "tapsi-icon-button", + elementClass: IconButtonElement, + react: React, + events: {}, + }, +); -export { IconButtonInput, IconButtonSlots }; +export { IconButtonElement, IconButtonSlots }; diff --git a/packages/react-components/src/Modal/Modal.ts b/packages/react-components/src/Modal/Modal.ts index 946c8e42..c3c82d4c 100644 --- a/packages/react-components/src/Modal/Modal.ts +++ b/packages/react-components/src/Modal/Modal.ts @@ -1,9 +1,13 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { + Modal as ModalElement, ModalHideEvent, - Modal as ModalInput, ModalShowEvent, ModalSlots, registerModal, @@ -11,14 +15,17 @@ import { registerModal(); -export const Modal = LitReact.createComponent({ +export const Modal: ReactWebComponent< + ModalElement, + { onShow: EventName; onHide: EventName } +> = createComponent({ tagName: "tapsi-modal", - elementClass: ModalInput, + elementClass: ModalElement, react: React, events: { - onShow: "show" as LitReact.EventName, - onHide: "hide" as LitReact.EventName, + onShow: "show" as EventName, + onHide: "hide" as EventName, }, }); -export { ModalHideEvent, ModalInput, ModalShowEvent, ModalSlots }; +export { ModalElement, ModalHideEvent, ModalShowEvent, ModalSlots }; diff --git a/packages/react-components/src/Notice/Notice.ts b/packages/react-components/src/Notice/Notice.ts index f18acc60..339da663 100644 --- a/packages/react-components/src/Notice/Notice.ts +++ b/packages/react-components/src/Notice/Notice.ts @@ -1,9 +1,13 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { + Notice as NoticeElement, NoticeHideEvent, - Notice as NoticeInput, NoticeShowEvent, NoticeSlots, registerNotice, @@ -11,14 +15,17 @@ import { registerNotice(); -export const Notice = LitReact.createComponent({ +export const Notice: ReactWebComponent< + NoticeElement, + { onShow: EventName; onHide: EventName } +> = createComponent({ tagName: "tapsi-notice", - elementClass: NoticeInput, + elementClass: NoticeElement, react: React, events: { - onShow: "show" as LitReact.EventName, - onHide: "hide" as LitReact.EventName, + onShow: "show" as EventName, + onHide: "hide" as EventName, }, }); -export { NoticeHideEvent, NoticeInput, NoticeShowEvent, NoticeSlots }; +export { NoticeElement, NoticeHideEvent, NoticeShowEvent, NoticeSlots }; diff --git a/packages/react-components/src/PinInput/PinInput.ts b/packages/react-components/src/PinInput/PinInput.ts index 5bb982a2..0b908c99 100644 --- a/packages/react-components/src/PinInput/PinInput.ts +++ b/packages/react-components/src/PinInput/PinInput.ts @@ -1,23 +1,34 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { PinInputCompleteEvent, - PinInput as PinInputInput, + PinInput as PinInputElement, registerPinInput, } from "@tapsioss/web-components"; registerPinInput(); -export const PinInput = LitReact.createComponent({ +export const PinInput: ReactWebComponent< + PinInputElement, + { + onComplete: EventName; + onChange: string; + onInput: string; + } +> = createComponent({ tagName: "tapsi-pin-input", - elementClass: PinInputInput, + elementClass: PinInputElement, react: React, events: { - onComplete: "complete" as LitReact.EventName, + onComplete: "complete" as EventName, onChange: "input", onInput: "input", }, }); -export { PinInputCompleteEvent, PinInputInput }; +export { PinInputCompleteEvent, PinInputElement }; diff --git a/packages/react-components/src/Pinwheel/Pinwheel.ts b/packages/react-components/src/Pinwheel/Pinwheel.ts index bacbe4fb..04e4b252 100644 --- a/packages/react-components/src/Pinwheel/Pinwheel.ts +++ b/packages/react-components/src/Pinwheel/Pinwheel.ts @@ -1,8 +1,8 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Pinwheel as PinwheelInput, + Pinwheel as PinwheelElement, PinwheelItemSlots, PinwheelSlots, registerPinwheel, @@ -10,11 +10,14 @@ import { registerPinwheel(); -export const Pinwheel = LitReact.createComponent({ +export const Pinwheel: ReactWebComponent< + PinwheelElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-pinwheel", - elementClass: PinwheelInput, + elementClass: PinwheelElement, react: React, events: { onChange: "change", onInput: "change" }, }); -export { PinwheelInput, PinwheelItemSlots, PinwheelSlots }; +export { PinwheelElement, PinwheelItemSlots, PinwheelSlots }; diff --git a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts index a17bf715..4407be1b 100644 --- a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts +++ b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts @@ -1,19 +1,20 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - PinwheelGroup as PinwheelGroupInput, + PinwheelGroup as PinwheelGroupElement, PinwheelGroupSlots, registerPinwheelGroup, } from "@tapsioss/web-components"; registerPinwheelGroup(); -export const PinwheelGroup = LitReact.createComponent({ - tagName: "tapsi-pinwheel-group", - elementClass: PinwheelGroupInput, - react: React, - events: {}, -}); +export const PinwheelGroup: ReactWebComponent = + createComponent({ + tagName: "tapsi-pinwheel-group", + elementClass: PinwheelGroupElement, + react: React, + events: {}, + }); -export { PinwheelGroupInput, PinwheelGroupSlots }; +export { PinwheelGroupElement, PinwheelGroupSlots }; diff --git a/packages/react-components/src/PinwheelItem/PinwheelItem.ts b/packages/react-components/src/PinwheelItem/PinwheelItem.ts index 8fdc7d60..7ac25e0c 100644 --- a/packages/react-components/src/PinwheelItem/PinwheelItem.ts +++ b/packages/react-components/src/PinwheelItem/PinwheelItem.ts @@ -1,7 +1,7 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; -import { PinwheelItem as PinwheelItemInput } from "@tapsioss/web-components"; +import { PinwheelItem as PinwheelItemElement } from "@tapsioss/web-components"; if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) { /* eslint-disable no-console */ @@ -11,9 +11,10 @@ if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) { /* eslint-enable no-console */ } -export const PinwheelItem = LitReact.createComponent({ - tagName: "tapsi-pinwheel-item", - elementClass: PinwheelItemInput, - react: React, - events: {}, -}); +export const PinwheelItem: ReactWebComponent = + createComponent({ + tagName: "tapsi-pinwheel-item", + elementClass: PinwheelItemElement, + react: React, + events: {}, + }); diff --git a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts index c7911600..da422c6c 100644 --- a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts +++ b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts @@ -1,16 +1,17 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - ProgressIndicator as ProgressIndicatorInput, + ProgressIndicator as ProgressIndicatorElement, registerProgressIndicator, } from "@tapsioss/web-components"; registerProgressIndicator(); -export const ProgressIndicator = LitReact.createComponent({ - tagName: "tapsi-progress-indicator", - elementClass: ProgressIndicatorInput, - react: React, - events: {}, -}); +export const ProgressIndicator: ReactWebComponent = + createComponent({ + tagName: "tapsi-progress-indicator", + elementClass: ProgressIndicatorElement, + react: React, + events: {}, + }); diff --git a/packages/react-components/src/Radio/Radio.ts b/packages/react-components/src/Radio/Radio.ts index 0efadb9a..58385db6 100644 --- a/packages/react-components/src/Radio/Radio.ts +++ b/packages/react-components/src/Radio/Radio.ts @@ -1,15 +1,18 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; -import { Radio as RadioInput, registerRadio } from "@tapsioss/web-components"; +import { Radio as RadioElement, registerRadio } from "@tapsioss/web-components"; registerRadio(); -export const Radio = LitReact.createComponent({ +export const Radio: ReactWebComponent< + RadioElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-radio", - elementClass: RadioInput, + elementClass: RadioElement, react: React, events: { onChange: "input", onInput: "input" }, }); -export { RadioInput }; +export { RadioElement }; diff --git a/packages/react-components/src/RateSlider/RateSlider.ts b/packages/react-components/src/RateSlider/RateSlider.ts index 0a0ba7b4..32d73c81 100644 --- a/packages/react-components/src/RateSlider/RateSlider.ts +++ b/packages/react-components/src/RateSlider/RateSlider.ts @@ -1,18 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - RateSlider as RateSliderInput, + RateSlider as RateSliderElement, registerRateSlider, } from "@tapsioss/web-components"; registerRateSlider(); -export const RateSlider = LitReact.createComponent({ +export const RateSlider: ReactWebComponent< + RateSliderElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-rate-slider", - elementClass: RateSliderInput, + elementClass: RateSliderElement, react: React, events: { onChange: "change", onInput: "change" }, }); -export { RateSliderInput }; +export { RateSliderElement }; diff --git a/packages/react-components/src/SegmentedView/SegmentedView.ts b/packages/react-components/src/SegmentedView/SegmentedView.ts index e0fed81c..66b6a21e 100644 --- a/packages/react-components/src/SegmentedView/SegmentedView.ts +++ b/packages/react-components/src/SegmentedView/SegmentedView.ts @@ -1,29 +1,35 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { registerSegmentedView, SegmentedViewActiveChangeEvent, - SegmentedView as SegmentedViewInput, + SegmentedView as SegmentedViewElement, SegmentedViewItemSlots, SegmentedViewSlots, } from "@tapsioss/web-components"; registerSegmentedView(); -export const SegmentedView = LitReact.createComponent({ +export const SegmentedView: ReactWebComponent< + SegmentedViewElement, + { onActiveChange: EventName } +> = createComponent({ tagName: "tapsi-segmented-view", - elementClass: SegmentedViewInput, + elementClass: SegmentedViewElement, react: React, events: { - onActiveChange: - "activechange" as LitReact.EventName, + onActiveChange: "activechange" as EventName, }, }); export { SegmentedViewActiveChangeEvent, - SegmentedViewInput, + SegmentedViewElement, SegmentedViewItemSlots, SegmentedViewSlots, }; diff --git a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts index 0e5dac0b..3f2521fc 100644 --- a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts +++ b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts @@ -1,7 +1,7 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; -import { SegmentedViewItem as SegmentedViewItemInput } from "@tapsioss/web-components"; +import { SegmentedViewItem as SegmentedViewItemElement } from "@tapsioss/web-components"; if ( typeof window !== "undefined" && @@ -14,9 +14,10 @@ if ( /* eslint-enable no-console */ } -export const SegmentedViewItem = LitReact.createComponent({ - tagName: "tapsi-segmented-view-item", - elementClass: SegmentedViewItemInput, - react: React, - events: {}, -}); +export const SegmentedViewItem: ReactWebComponent = + createComponent({ + tagName: "tapsi-segmented-view-item", + elementClass: SegmentedViewItemElement, + react: React, + events: {}, + }); diff --git a/packages/react-components/src/Skeleton/Skeleton.ts b/packages/react-components/src/Skeleton/Skeleton.ts index c405b4bb..041e2390 100644 --- a/packages/react-components/src/Skeleton/Skeleton.ts +++ b/packages/react-components/src/Skeleton/Skeleton.ts @@ -1,19 +1,19 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { registerSkeleton, - Skeleton as SkeletonInput, + Skeleton as SkeletonElement, SkeletonSlots, } from "@tapsioss/web-components"; registerSkeleton(); -export const Skeleton = LitReact.createComponent({ +export const Skeleton: ReactWebComponent = createComponent({ tagName: "tapsi-skeleton", - elementClass: SkeletonInput, + elementClass: SkeletonElement, react: React, events: {}, }); -export { SkeletonInput, SkeletonSlots }; +export { SkeletonElement, SkeletonSlots }; diff --git a/packages/react-components/src/Snackbar/Snackbar.ts b/packages/react-components/src/Snackbar/Snackbar.ts index 6e75c3f0..1a4f37ec 100644 --- a/packages/react-components/src/Snackbar/Snackbar.ts +++ b/packages/react-components/src/Snackbar/Snackbar.ts @@ -1,24 +1,31 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { registerSnackbar, + Snackbar as SnackbarElement, SnackbarHideEvent, - Snackbar as SnackbarInput, SnackbarShowEvent, SnackbarSlots, } from "@tapsioss/web-components"; registerSnackbar(); -export const Snackbar = LitReact.createComponent({ +export const Snackbar: ReactWebComponent< + SnackbarElement, + { onShow: EventName; onHide: EventName } +> = createComponent({ tagName: "tapsi-snackbar", - elementClass: SnackbarInput, + elementClass: SnackbarElement, react: React, events: { - onShow: "show" as LitReact.EventName, - onHide: "hide" as LitReact.EventName, + onShow: "show" as EventName, + onHide: "hide" as EventName, }, }); -export { SnackbarHideEvent, SnackbarInput, SnackbarShowEvent, SnackbarSlots }; +export { SnackbarElement, SnackbarHideEvent, SnackbarShowEvent, SnackbarSlots }; diff --git a/packages/react-components/src/Spinner/Spinner.ts b/packages/react-components/src/Spinner/Spinner.ts index 49d64b4f..58cfd247 100644 --- a/packages/react-components/src/Spinner/Spinner.ts +++ b/packages/react-components/src/Spinner/Spinner.ts @@ -1,16 +1,16 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Spinner as SpinnerInput, + Spinner as SpinnerElement, registerSpinner, } from "@tapsioss/web-components"; registerSpinner(); -export const Spinner = LitReact.createComponent({ +export const Spinner: ReactWebComponent = createComponent({ tagName: "tapsi-spinner", - elementClass: SpinnerInput, + elementClass: SpinnerElement, react: React, events: {}, }); diff --git a/packages/react-components/src/Stepper/Stepper.ts b/packages/react-components/src/Stepper/Stepper.ts index efcc8194..0335edbb 100644 --- a/packages/react-components/src/Stepper/Stepper.ts +++ b/packages/react-components/src/Stepper/Stepper.ts @@ -1,18 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Stepper as StepperInput, + Stepper as StepperElement, registerStepper, } from "@tapsioss/web-components"; registerStepper(); -export const Stepper = LitReact.createComponent({ +export const Stepper: ReactWebComponent< + StepperElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-stepper", - elementClass: StepperInput, + elementClass: StepperElement, react: React, events: { onChange: "change", onInput: "change" }, }); -export { StepperInput }; +export { StepperElement }; diff --git a/packages/react-components/src/Switch/Switch.ts b/packages/react-components/src/Switch/Switch.ts index c9a37ddb..79feafe0 100644 --- a/packages/react-components/src/Switch/Switch.ts +++ b/packages/react-components/src/Switch/Switch.ts @@ -1,18 +1,21 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { - Switch as SwitchInput, + Switch as SwitchElement, registerSwitch, } from "@tapsioss/web-components"; registerSwitch(); -export const Switch = LitReact.createComponent({ +export const Switch: ReactWebComponent< + SwitchElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-switch", - elementClass: SwitchInput, + elementClass: SwitchElement, react: React, events: { onChange: "input", onInput: "input" }, }); -export { SwitchInput }; +export { SwitchElement }; diff --git a/packages/react-components/src/TextArea/TextArea.ts b/packages/react-components/src/TextArea/TextArea.ts index 1d10663a..f17ec1a0 100644 --- a/packages/react-components/src/TextArea/TextArea.ts +++ b/packages/react-components/src/TextArea/TextArea.ts @@ -1,19 +1,22 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { registerTextArea, - TextArea as TextAreaInput, + TextArea as TextAreaElement, TextAreaSlots, } from "@tapsioss/web-components"; registerTextArea(); -export const TextArea = LitReact.createComponent({ +export const TextArea: ReactWebComponent< + TextAreaElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-text-area", - elementClass: TextAreaInput, + elementClass: TextAreaElement, react: React, events: { onChange: "input", onInput: "input" }, }); -export { TextAreaInput, TextAreaSlots }; +export { TextAreaElement, TextAreaSlots }; diff --git a/packages/react-components/src/TextField/TextField.ts b/packages/react-components/src/TextField/TextField.ts index 2063d95b..e681244c 100644 --- a/packages/react-components/src/TextField/TextField.ts +++ b/packages/react-components/src/TextField/TextField.ts @@ -1,19 +1,22 @@ -import * as LitReact from "@lit/react"; +import { createComponent, type ReactWebComponent } from "@lit/react"; import * as React from "react"; import { registerTextField, - TextField as TextFieldInput, + TextField as TextFieldElement, TextFieldSlots, } from "@tapsioss/web-components"; registerTextField(); -export const TextField = LitReact.createComponent({ +export const TextField: ReactWebComponent< + TextFieldElement, + { onChange: string; onInput: string } +> = createComponent({ tagName: "tapsi-text-field", - elementClass: TextFieldInput, + elementClass: TextFieldElement, react: React, events: { onChange: "input", onInput: "input" }, }); -export { TextFieldInput, TextFieldSlots }; +export { TextFieldElement, TextFieldSlots }; diff --git a/packages/react-components/src/Tooltip/Tooltip.ts b/packages/react-components/src/Tooltip/Tooltip.ts index 9a799bab..37d0a9a1 100644 --- a/packages/react-components/src/Tooltip/Tooltip.ts +++ b/packages/react-components/src/Tooltip/Tooltip.ts @@ -1,23 +1,30 @@ -import * as LitReact from "@lit/react"; +import { + createComponent, + type EventName, + type ReactWebComponent, +} from "@lit/react"; import * as React from "react"; import { registerTooltip, + Tooltip as TooltipElement, TooltipHideEvent, - Tooltip as TooltipInput, TooltipShowEvent, } from "@tapsioss/web-components"; registerTooltip(); -export const Tooltip = LitReact.createComponent({ +export const Tooltip: ReactWebComponent< + TooltipElement, + { onShow: EventName; onHide: EventName } +> = createComponent({ tagName: "tapsi-tooltip", - elementClass: TooltipInput, + elementClass: TooltipElement, react: React, events: { - onShow: "show" as LitReact.EventName, - onHide: "hide" as LitReact.EventName, + onShow: "show" as EventName, + onHide: "hide" as EventName, }, }); -export { TooltipHideEvent, TooltipInput, TooltipShowEvent }; +export { TooltipElement, TooltipHideEvent, TooltipShowEvent }; diff --git a/packages/react-components/templates/component.txt b/packages/react-components/templates/component.txt index 7d5bf634..72eb6ca4 100644 --- a/packages/react-components/templates/component.txt +++ b/packages/react-components/templates/component.txt @@ -2,7 +2,7 @@ {{register}} -export const {{componentName}} = LitReact.createComponent({ +export const {{componentName}}: {{componentType}} = createComponent({ tagName: "{{elementTag}}", elementClass: {{elementClass}}, react: React, From a7b07841d92b1dbf3cacd5923f3d63634f867e38 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Sat, 3 May 2025 17:50:37 +0330 Subject: [PATCH 5/5] fix: remove unused codes --- packages/react-components/scripts/generate.ts | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index ad94d42d..1125927d 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -212,28 +212,6 @@ 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 */}`; - let componentTypeEvents; - - if ((_events ?? [])?.length === 0) { - componentTypeEvents = "object"; - } else { - componentTypeEvents = `{ ${ - _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(",") || "" - } }`; - } - const componentType = `ReactWebComponent<${elementClass}${ _events?.length > 0 ? `, { ${