fix: improve typings (#529)

tenphi · web-flow · commit dfc62981a194 · 2024-11-22T11:37:47.000+01:00
diff --git a/.changeset/fast-hats-teach.md b/.changeset/fast-hats-teach.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Futher improvement of typings.
diff --git a/.changeset/serious-windows-search.md b/.changeset/serious-windows-search.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add support for more complex selectors in mods.
diff --git a/.changeset/swift-pets-roll.md b/.changeset/swift-pets-roll.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Improve typings and add support for the most html attributes and event handlers.
diff --git a/src/components/actions/Action/Action.tsx b/src/components/actions/Action/Action.tsx
@@ -1,24 +1,24 @@
-import { forwardRef, MouseEventHandler } from 'react';
+import { forwardRef } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { FocusableRef } from '@react-types/shared';
 
 import {
-  BaseProps,
+  AllBaseProps,
   BaseStyleProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
   Styles,
-  TagNameProps,
   TEXT_STYLES,
   TextStyleProps,
   tasty,
+  TagName,
 } from '../../../tasty';
 import { useAction } from '../use-action';
 
-export interface CubeActionProps
-  extends BaseProps,
-    TagNameProps,
+export interface CubeActionProps<
+  T extends TagName = 'a' | 'button' | 'span' | 'div',
+> extends Omit<AllBaseProps<T>, 'htmlType'>,
     BaseStyleProps,
     ContainerStyleProps,
     TextStyleProps,
@@ -27,9 +27,6 @@ export interface CubeActionProps
   label?: string;
   htmlType?: 'button' | 'submit' | 'reset' | undefined;
   download?: string;
-  onClick?: MouseEventHandler;
-  onMouseEnter?: MouseEventHandler;
-  onMouseLeave?: MouseEventHandler;
 }
 
 const DEFAULT_ACTION_STYLES: Styles = {
diff --git a/src/components/actions/Button/Button.stories.tsx b/src/components/actions/Button/Button.stories.tsx
@@ -41,7 +41,6 @@ const Template: StoryFn<CubeButtonProps> = ({
   icon,
   rightIcon,
   label,
-  onClick,
   ...props
 }) => (
   <Space
diff --git a/src/components/actions/use-action.ts b/src/components/actions/use-action.ts
@@ -1,28 +1,25 @@
-import { MouseEventHandler, useContext } from 'react';
+import { useContext } from 'react';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { useHover, useButton, AriaButtonProps } from 'react-aria';
 import { FocusableRef, PressEvent } from '@react-types/shared';
 
 import { UIKitContext } from '../../provider';
 import { mergeProps } from '../../utils/react';
 import { useFocus } from '../../utils/react/interactions';
-import { BaseProps, filterBaseProps, TagNameProps } from '../../tasty';
+import { AllBaseProps, filterBaseProps, TagName } from '../../tasty';
 import { useTracking } from '../../providers/TrackingProvider';
 import { useEvent } from '../../_internal';
 
 const LINK_PRESS_EVENT = 'Link Press';
 const BUTTON_PRESS_EVENT = 'Button Press';
 
-export interface CubeUseActionProps
-  extends BaseProps,
-    TagNameProps,
+export interface CubeUseActionProps<
+  T extends TagName = 'a' | 'button' | 'span' | 'div',
+> extends AllBaseProps<T>,
     Omit<AriaButtonProps, 'type'> {
   to?: string;
   label?: string;
   htmlType?: 'button' | 'submit' | 'reset' | undefined;
-  onClick?: MouseEventHandler;
-  onMouseEnter?: MouseEventHandler;
-  onMouseLeave?: MouseEventHandler;
 }
 
 const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
diff --git a/src/components/content/ActiveZone/ActiveZone.tsx b/src/components/content/ActiveZone/ActiveZone.tsx
@@ -12,15 +12,13 @@ import {
   extractStyles,
   filterBaseProps,
   Styles,
-  TagNameProps,
   TEXT_STYLES,
   TextStyleProps,
 } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 
 export interface CubeActiveZoneProps
   extends BaseProps,
-    TagNameProps,
     BaseStyleProps,
     ContainerStyleProps,
     TextStyleProps,
diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx
@@ -2,14 +2,14 @@ import { CSSProperties, forwardRef } from 'react';
 
 import {
   BASE_STYLES,
-  BaseProps,
+  AllBaseProps,
   BaseStyleProps,
   COLOR_STYLES,
   ColorStyleProps,
   extractStyles,
   filterBaseProps,
   ResponsiveStyleValue,
-  TagNameProps,
+  TagName,
   tasty,
   TEXT_STYLES,
   TextStyleProps,
@@ -24,9 +24,8 @@ export const TEXT_PROP_MAP = {
   italic: 'fontStyle',
 } as const;
 
-export interface CubeTextProps
-  extends BaseProps,
-    TagNameProps,
+export interface CubeTextProps<T extends TagName = TagName>
+  extends AllBaseProps<T>,
     TextStyleProps,
     BaseStyleProps,
     ColorStyleProps {
@@ -111,12 +110,10 @@ const _Text = Object.assign(Text, {
   Success: forwardRef(function SuccessText(props: CubeTextProps, ref) {
     return <Text ref={ref} color="#success-text" {...props} />;
   }),
-  Strong: forwardRef(function StrongText(props: CubeTextProps, ref) {
-    return (
-      <Text ref={ref} as="strong" preset="strong" color="#dark" {...props} />
-    );
+  Strong: forwardRef(function StrongText(props: CubeTextProps<'strong'>, ref) {
+    return <Text ref={ref} as="strong" preset="strong" {...props} />;
   }),
-  Emphasis: forwardRef(function EmphasisText(props: CubeTextProps, ref) {
+  Emphasis: forwardRef(function StrongText(props: CubeTextProps<'em'>, ref) {
     return <Text ref={ref} as="em" preset="em" {...props} />;
   }),
   Selection: forwardRef(function SelectionText(props: CubeTextProps, ref) {
diff --git a/src/components/content/Title.tsx b/src/components/content/Title.tsx
@@ -7,7 +7,6 @@ import {
   extractStyles,
   filterBaseProps,
   PositionStyleProps,
-  TagNameProps,
   tasty,
   TEXT_STYLES,
 } from '../../tasty';
@@ -20,7 +19,6 @@ const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
 export interface CubeTitleProps
   extends BaseProps,
     CubeTextProps,
-    TagNameProps,
     ContainerStyleProps,
     PositionStyleProps {
   /** The level of the heading **/
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
@@ -22,7 +22,7 @@ import {
   AriaSelectProps,
 } from 'react-aria';
 import styled from 'styled-components';
-import { CollectionBase, DOMRef } from '@react-types/shared';
+import { AriaLabelingProps, CollectionBase, DOMRef } from '@react-types/shared';
 
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { useProviderProps } from '../../../provider';
@@ -243,6 +243,7 @@ const StyledOverlayElement = styled(OverlayElement)`
 
 export interface CubeSelectBaseProps<T>
   extends BasePropsWithoutChildren,
+    AriaLabelingProps,
     OuterStyleProps,
     FieldBaseProps,
     BlockStyleProps,
diff --git a/src/components/form/Label.tsx b/src/components/form/Label.tsx
@@ -1,5 +1,5 @@
 import { useDOMRef } from '@react-spectrum/utils';
-import { forwardRef, MouseEventHandler } from 'react';
+import { forwardRef } from 'react';
 
 import { useProviderProps } from '../../provider';
 import {
@@ -9,7 +9,6 @@ import {
   extractStyles,
   filterBaseProps,
   Styles,
-  TagNameProps,
   tasty,
 } from '../../tasty/index';
 import {
@@ -78,18 +77,14 @@ const LabelElement = tasty({
   styles: LABEL_STYLES,
 });
 
-export interface CubeLabelProps
-  extends BaseProps,
-    TagNameProps,
-    ContainerStyleProps {
+export interface CubeLabelProps extends BaseProps, ContainerStyleProps {
   labelPosition?: LabelPosition;
   necessityIndicator?: NecessityIndicator;
   isRequired?: boolean;
   includeNecessityIndicatorInAccessibilityName?: boolean;
   htmlFor?: string;
   for?: string;
   validationState?: ValidationState;
-  onClick?: MouseEventHandler;
 }
 
 function Label(props: CubeLabelProps, ref) {
@@ -107,7 +102,6 @@ function Label(props: CubeLabelProps, ref) {
     isDisabled,
     validationState,
     for: labelFor,
-    onClick,
     ...otherProps
   } = props;
 
@@ -143,7 +137,6 @@ function Label(props: CubeLabelProps, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
       }}
-      onClick={onClick}
     >
       {typeof children !== 'string' ? (
         children
diff --git a/src/index.ts b/src/index.ts
@@ -138,7 +138,6 @@ export * from './components/fields';
 
 export type {
   TagName,
-  TagNameProps,
   AllBaseProps,
   BaseProps,
   BaseStyleProps,
diff --git a/src/tasty/index.ts b/src/tasty/index.ts
@@ -32,7 +32,6 @@ export type {
   FlowStyleProps,
   ShortGridStyles,
   GlobalStyledProps,
-  TagNameProps,
   TagName,
 } from './types';
 export type {
diff --git a/src/tasty/types.ts b/src/tasty/types.ts
@@ -46,8 +46,9 @@ type Caps =
   | 'Y'
   | 'Z';
 
-export interface BasePropsWithoutChildren
+export interface BasePropsWithoutChildren<K extends TagName = TagName>
   extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
+  as?: K;
   /** QA ID for e2e testing. An alias for `data-qa` attribute. */
   qa?: string;
   /** QA value for e2e testing. An alias for `data-qaval` attribute. */
@@ -80,28 +81,33 @@ export interface BasePropsWithoutChildren
   theme?: 'default' | 'danger' | 'special' | (string & {});
 }
 
-export interface BaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
+export interface BaseProps<K extends TagName = TagName>
   extends AriaLabelingProps,
-    BasePropsWithoutChildren,
+    BasePropsWithoutChildren<K>,
     Pick<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'children'> {}
 
-export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
-  extends BaseProps,
+export interface AllBaseProps<K extends TagName = TagName>
+  extends BaseProps<K>,
     Omit<
       AllHTMLAttributes<HTMLElementTagNameMap[K]>,
       | 'style'
-      | 'size'
       | 'disabled'
       | 'hidden'
       | 'css'
+      | 'content'
+      | 'translate'
+      | 'as'
+      | 'form'
+      | 'bgcolor'
+      | 'background'
+      | 'align'
+      | 'border'
       | 'color'
       | 'height'
+      | 'size'
       | 'width'
-      | 'content'
-      | 'translate'
-    > {
-  as?: K;
-}
+      | 'prefix'
+    > {}
 
 export type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
 export type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
@@ -131,8 +137,3 @@ export interface Props {
 }
 
 export type TagName = keyof HTMLElementTagNameMap;
-
-export interface TagNameProps {
-  /** The tag name you want to use for the element */
-  as?: TagName;
-}
diff --git a/src/tasty/utils/styles.ts b/src/tasty/utils/styles.ts
@@ -906,7 +906,7 @@ export function styleMapToStyleMapStateList(
 }
 
 const STATES_REGEXP =
-  /([&|!^])|([()])|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([:a-z0-9-]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
+  /([&|!^])|([()])|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
 export const STATE_OPERATORS = {
   NOT: '!',
   AND: '&',

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@cube-dev/ui-kit': patch
 +---
++
 +Futher improvement of typings.