chore(component): fix component function type with dedicated function

lumapps · Dec 13, 2024 · d66476d · d66476d
1 parent db72fb7
commit d66476d
Show file tree

Hide file tree

Showing 88 changed files with 362 additions and 287 deletions.
diff --git a/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx b/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
@@ -1,4 +1,6 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,9 +16,7 @@ import {
     Toolbar,
     ButtonProps,
 } from '@lumx/react';
-
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 
@@ -77,7 +77,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * It should not have a complex content.
  * Children of this component should only be strings, paragraphs or links.
  */
-export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AlertDialog = createComponent<AlertDialogProps, HTMLDivElement>((props, ref) => {
     const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } =
         props;
 

diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -199,7 +200,7 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Autocomplete = createComponent<AutocompleteProps, HTMLDivElement>((props, ref) => {
     const {
         anchorToInput,
         children,

diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
@@ -1,11 +1,11 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { mdiClose } from '@lumx/icons';
-import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 
-import { Comp } from '@lumx/react/utils/type';
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -65,7 +65,7 @@ const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AutocompleteMultiple = createComponent<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
     const {
         anchorToInput,
         children,

diff --git a/packages/lumx-react/src/components/avatar/Avatar.tsx b/packages/lumx-react/src/components/avatar/Avatar.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -66,7 +67,7 @@ const DEFAULT_PROPS: Partial<AvatarProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Avatar = createComponent<AvatarProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         alt,

diff --git a/packages/lumx-react/src/components/badge/Badge.tsx b/packages/lumx-react/src/components/badge/Badge.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { ColorPalette } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -38,7 +39,7 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Badge = createComponent<BadgeProps, HTMLDivElement>((props, ref) => {
     const { children, className, color, ...forwardedProps } = props;
     return (
         <div

diff --git a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx b/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import classNames from 'classnames';
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 export interface BadgeWrapperProps extends GenericProps {
     /** Badge. */
@@ -21,7 +22,7 @@ const COMPONENT_NAME = 'BadgeWrapper';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const BadgeWrapper = createComponent<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
     const { badge, children, className, ...forwardedProps } = props;
 
     return (

diff --git a/packages/lumx-react/src/components/button/Button.tsx b/packages/lumx-react/src/components/button/Button.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
-import { Comp, isComponent } from '@lumx/react/utils/type';
+import { isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
@@ -54,7 +55,7 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Button = createComponent<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const { children, className, emphasis, leftIcon, rightIcon, size, theme, ...forwardedProps } = props;
 
     const buttonClassName = classNames(

diff --git a/packages/lumx-react/src/components/button/ButtonGroup.tsx b/packages/lumx-react/src/components/button/ButtonGroup.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
@@ -32,7 +33,7 @@ const DEFAULT_PROPS: Partial<ButtonGroupProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ButtonGroup = createComponent<ButtonGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

diff --git a/packages/lumx-react/src/components/button/ButtonRoot.tsx b/packages/lumx-react/src/components/button/ButtonRoot.tsx
@@ -1,12 +1,13 @@
-import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -94,7 +95,7 @@ const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+export const ButtonRoot = createComponent<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const {
         'aria-label': ariaLabel,
         children,

diff --git a/packages/lumx-react/src/components/button/IconButton.tsx b/packages/lumx-react/src/components/button/IconButton.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
 
+import React from 'react';
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 
 export interface IconButtonProps extends BaseButtonProps {
@@ -56,7 +56,7 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const IconButton = createComponent<IconButtonProps, HTMLButtonElement>((props, ref) => {
     const { emphasis, image, icon, label, size, theme, tooltipProps, hideTooltip, ...forwardedProps } = props;
 
     return (

diff --git a/packages/lumx-react/src/components/checkbox/Checkbox.tsx b/packages/lumx-react/src/components/checkbox/Checkbox.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -65,7 +66,7 @@ const DEFAULT_PROPS: Partial<CheckboxProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Checkbox = createComponent<CheckboxProps, HTMLDivElement>((props, ref) => {
     const {
         checked,
         className,

diff --git a/packages/lumx-react/src/components/chip/Chip.tsx b/packages/lumx-react/src/components/chip/Chip.tsx
@@ -1,14 +1,15 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { onEnterPressed } from '@lumx/react/utils/event';
 
 import classNames from 'classnames';
 
 import isFunction from 'lodash/isFunction';
-import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * Chip sizes.
@@ -66,7 +67,7 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Chip = createComponent<ChipProps, HTMLAnchorElement>((props, ref) => {
     const {
         after,
         before,
@@ -143,9 +144,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
                     {before}
                 </div>
             )}
-
             <div className={`${CLASSNAME}__label`}>{children}</div>
-
             {after && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div

diff --git a/packages/lumx-react/src/components/chip/ChipGroup.tsx b/packages/lumx-react/src/components/chip/ChipGroup.tsx
@@ -1,9 +1,10 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { HorizontalAlignment } from '@lumx/react/components';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -43,7 +44,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalChipGroup = createComponent<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
     const chipGroupClassName = handleBasicClasses({
         prefix: CLASSNAME,

diff --git a/packages/lumx-react/src/components/comment-block/CommentBlock.tsx b/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
@@ -1,9 +1,10 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { AvatarProps } from '../avatar/Avatar';
@@ -87,7 +88,7 @@ const DEFAULT_PROPS: Partial<CommentBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const CommentBlock = createComponent<CommentBlockProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         avatarProps,
@@ -161,7 +162,6 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
                     {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
                 </div>
             </div>
-
             {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
         </div>
     );

diff --git a/packages/lumx-react/src/components/date-picker/DatePicker.tsx b/packages/lumx-react/src/components/date-picker/DatePicker.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils/type';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { useState } from 'react';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
@@ -13,7 +13,7 @@ import { DatePickerProps } from './types';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePicker = createComponent<DatePickerProps, HTMLDivElement>((props, ref) => {
     const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
 
     let referenceDate = value || defaultMonth || new Date();

diff --git a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
@@ -1,4 +1,5 @@
-import React, { KeyboardEventHandler, forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
 import {
     Button,
@@ -12,7 +13,6 @@ import {
     Toolbar,
 } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
@@ -52,7 +52,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerControlled = createComponent<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
     const {
         locale = getCurrentLocale(),
         maxDate,