Skip to content

Commit

Permalink
fix typescript error hoc
Browse files Browse the repository at this point in the history
  • Loading branch information
Lionel Bertrand committed Sep 2, 2024
1 parent 13ee864 commit 6dc2806
Show file tree
Hide file tree
Showing 27 changed files with 205 additions and 198 deletions.
7 changes: 7 additions & 0 deletions packages/core/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,13 @@ export type State<P> = {
export type StyledComponent<P extends Record<string, any>> =
ForwardRefExoticComponent<P & RefAttributes<any>>;

export type InferRef<T> =
T extends ForwardRefExoticComponent<infer Ref>
? Ref extends RefAttributes<infer RefElement>
? RefElement
: never
: never;

export type GetProps<A extends StylableComponent<any>> =
A extends StyledComponent<infer P>
? P
Expand Down
18 changes: 9 additions & 9 deletions packages/core/src/withDefaultProps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@

import { forwardRef, type ComponentType } from 'react';
import { withStaticProperties } from './withStaticProperties';
import type { InferRef } from './types';

export function withDefaultProps<P extends Record<string, any>>(
export function withDefaultProps<P>(
Comp: ComponentType<P>,
defaultProps: Partial<P>
) {
const { id, styleSheet, displayName } = Comp as any;
const { id, displayName } = Comp as any;
return withStaticProperties(
forwardRef(function WithDefaultPropsRender(
props: Omit<P, keyof typeof defaultProps> &
Partial<Pick<P, keyof typeof defaultProps>>,
ref: any
) {
forwardRef<
InferRef<typeof Comp>,
Omit<P, keyof typeof defaultProps> &
Partial<Pick<P, keyof typeof defaultProps>>
>(function WithDefaultPropsRender(props, ref) {
return <Comp {...defaultProps} {...(props as any)} ref={ref} />;
}),
{ id, styleSheet, displayName } as {
{ id, displayName } as {
id?: string;
styleSheet: () => unknown;
displayName?: string;
}
);
Expand Down
5 changes: 3 additions & 2 deletions packages/primitive/src/Badge/BadgeText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import type { InferRef } from '@crossed/core';
import { ComponentType, forwardRef } from 'react';

export const createBadgeText = <T,>(StyledText: ComponentType<T>) =>
forwardRef<any, T>((props, ref) => {
return <StyledText {...props} ref={ref} />;
forwardRef<InferRef<typeof StyledText>, T>((props, ref) => {
return <StyledText {...(props as any)} ref={ref} />;
});
7 changes: 4 additions & 3 deletions packages/primitive/src/Button/ButtonElement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import { ComponentType, forwardRef } from 'react';
import type { InferRef } from '@crossed/core';
import { type ComponentType, forwardRef } from 'react';

export const createButtonElement = <T,>(StyledElement: ComponentType<T>) =>
forwardRef<any, T>((props, ref) => {
return <StyledElement {...props} ref={ref} />;
forwardRef<InferRef<typeof StyledElement>, T>((props, ref) => {
return <StyledElement {...(props as any)} ref={ref} />;
});
31 changes: 17 additions & 14 deletions packages/primitive/src/Button/ButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,25 @@
* LICENSE file in the root of this projects source tree.
*/

import { ComponentType, forwardRef } from 'react';
import { type ComponentType, forwardRef } from 'react';
import { ProviderGroup } from './contextGroup';
import { Orientation, RovingFocusGroup } from '../utils/RovingFocus';
import { ButtonGroupCollection } from './contextCollection';
import type { InferRef } from '@crossed/core';

export const createButtonGroup = <T,>(StyledGroup: ComponentType<T>) =>
forwardRef<any, T & { orientation?: Orientation }>((props, ref) => {
return (
<ProviderGroup grouped orientation={props.orientation ?? 'horizontal'}>
<RovingFocusGroup orientation={props.orientation ?? 'horizontal'}>
<ButtonGroupCollection.Provider>
<ButtonGroupCollection.Slot>
<StyledGroup {...props} ref={ref} />
</ButtonGroupCollection.Slot>
</ButtonGroupCollection.Provider>
</RovingFocusGroup>
</ProviderGroup>
);
});
forwardRef<InferRef<typeof StyledGroup>, T & { orientation?: Orientation }>(
(props, ref) => {
return (
<ProviderGroup grouped orientation={props.orientation ?? 'horizontal'}>
<RovingFocusGroup orientation={props.orientation ?? 'horizontal'}>
<ButtonGroupCollection.Provider>
<ButtonGroupCollection.Slot>
<StyledGroup {...(props as any)} ref={ref} />
</ButtonGroupCollection.Slot>
</ButtonGroupCollection.Provider>
</RovingFocusGroup>
</ProviderGroup>
);
}
);
5 changes: 3 additions & 2 deletions packages/primitive/src/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import type { InferRef } from '@crossed/core';
import { forwardRef, type ComponentType } from 'react';

export const createDropdownMain = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot {...props} ref={ref} />;
forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
return <StyledRoot {...(props as any)} ref={ref} />;
});
5 changes: 3 additions & 2 deletions packages/primitive/src/Dropdown/DropdownContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,17 @@ import { forwardRef, type ComponentType } from 'react';
import { useContext } from './context';
import { RovingFocus } from '../utils/RovingFocus';
import { VisibilityHidden } from '../utils/VisibilityHidden';
import type { InferRef } from '@crossed/core';

export const createDropdownContent = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
const { id, open } = useContext();
return (
<RovingFocus>
<VisibilityHidden hidden={!open}>
<StyledRoot
role="menu"
{...props}
{...(props as any)}
ref={ref}
id={id}
aria-labelledby={`label-${id}`}
Expand Down
2 changes: 1 addition & 1 deletion packages/primitive/src/Dropdown/DropdownDivider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ import { forwardRef, type ComponentType } from 'react';

export const createDropdownDivider = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot role="separator" {...props} ref={ref} />;
return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
});
12 changes: 5 additions & 7 deletions packages/primitive/src/Dropdown/DropdownItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import { ComponentType, forwardRef } from 'react';
import { useContext } from './context';
import { composeEventHandlers } from '@crossed/core';
import { composeEventHandlers, InferRef } from '@crossed/core';
import { RovingFocus } from '../utils/RovingFocus';
import type { RequiredAccessibilityProps } from '../types';

Expand All @@ -17,18 +17,16 @@ export type DropdownItemProps = {
export const createDropdownItem = <P extends Record<string, any>>(
Styled: ComponentType<P>
) =>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
forwardRef<
any,
InferRef<typeof Styled>,
DropdownItemProps & RequiredAccessibilityProps<P, 'aria-label'>
>((props, ref) => {
const { setOpen } = useContext();
return (
<RovingFocus.Item ref={ref} focusable={!props.disabled}>
<RovingFocus.Item ref={ref} focusable={!(props as any).disabled}>
<Styled
tabIndex={props.disabled ? -1 : 0}
aria-disabled={(props.disabled || false).toString()}
tabIndex={(props as any).disabled ? -1 : 0}
aria-disabled={((props as any).disabled || false).toString()}
role="menuitem"
{...(props as any)}
onPointerUp={composeEventHandlers((props as any).onPress, () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/primitive/src/Dropdown/DropdownLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ import { forwardRef, type ComponentType } from 'react';

export const createDropdownLabel = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot role="separator" {...props} ref={ref} />;
return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
});
5 changes: 3 additions & 2 deletions packages/primitive/src/Label/Label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

import { useId, type ComponentType, useRef, forwardRef } from 'react';
import { Provider } from './context';
import type { InferRef } from '@crossed/core';

export const createLabelMain = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
const id = useId();
const inputRef = useRef();
return (
<Provider id={id} inputRef={inputRef}>
<StyledRoot {...props} ref={ref} />
<StyledRoot {...(props as any)} ref={ref} />
</Provider>
);
});
10 changes: 5 additions & 5 deletions packages/primitive/src/List/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
* LICENSE file in the root of this projects source tree.
*/

import { ComponentType, forwardRef } from 'react';
import { withDefaultProps } from '@crossed/core';
import type { ComponentType } from 'react';

export const createListMain = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => (
<StyledRoot role="list" {...props} ref={ref} />
));
export const createListMain = <P extends Record<string, any>>(
StyledRoot: ComponentType<P>
) => withDefaultProps(StyledRoot, { role: 'list' } as any);
5 changes: 2 additions & 3 deletions packages/primitive/src/List/ListDivider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* LICENSE file in the root of this projects source tree.
*/

import { forwardRef, type ComponentType } from 'react';
import type { ComponentType } from 'react';

export const createListDivider = <P,>(Styled: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => <Styled {...props} ref={ref} />);
export const createListDivider = <P,>(Styled: ComponentType<P>) => Styled;
5 changes: 3 additions & 2 deletions packages/primitive/src/List/ListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import type { InferRef } from '@crossed/core';
import { ComponentType, forwardRef } from 'react';

export const createListItem = <P,>(StyledItem: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => (
<StyledItem role="listitem" {...props} ref={ref} />
forwardRef<InferRef<typeof StyledItem>, P>((props, ref) => (
<StyledItem role="listitem" {...(props as any)} ref={ref} />
));
5 changes: 4 additions & 1 deletion packages/primitive/src/List/ListLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import type { InferRef } from '@crossed/core';
import { forwardRef, type ComponentType } from 'react';

export const createListLabel = <P,>(Styled: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => <Styled {...props} ref={ref} />);
forwardRef<InferRef<typeof Styled>, P>((props, ref) => (
<Styled {...(props as any)} ref={ref} />
));
4 changes: 3 additions & 1 deletion packages/primitive/src/List/ListSubTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@
import { forwardRef, type ComponentType } from 'react';

export const createListSubTitle = <P,>(StyledSubTitle: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => <StyledSubTitle {...props} ref={ref} />);
forwardRef<any, P>((props, ref) => (
<StyledSubTitle {...(props as any)} ref={ref} />
));
6 changes: 4 additions & 2 deletions packages/primitive/src/List/ListTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
* LICENSE file in the root of this projects source tree.
*/

import { ComponentType, forwardRef } from 'react';
import { type ComponentType, forwardRef } from 'react';

export const createListTitle = <P,>(StyledTitle: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => <StyledTitle {...props} ref={ref} />);
forwardRef<any, P>((props, ref) => (
<StyledTitle {...(props as any)} ref={ref} />
));
6 changes: 2 additions & 4 deletions packages/primitive/src/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
* LICENSE file in the root of this projects source tree.
*/

import { forwardRef, type ComponentType } from 'react';
import type { ComponentType } from 'react';

export const createSelectMain = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot {...props} ref={ref} />;
});
StyledRoot;
2 changes: 1 addition & 1 deletion packages/primitive/src/Select/SelectContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const createSelectContent = <P,>(StyledRoot: ComponentType<P>) =>
<VisibilityHidden hidden={!open}>
<StyledRoot
role="menu"
{...props}
{...(props as any)}
ref={ref}
id={id}
aria-labelledby={`label-${id}`}
Expand Down
5 changes: 3 additions & 2 deletions packages/primitive/src/Select/SelectDivider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
* LICENSE file in the root of this projects source tree.
*/

import type { InferRef } from '@crossed/core';
import { forwardRef, type ComponentType } from 'react';

export const createSelectDivider = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot role="separator" {...props} ref={ref} />;
forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
});
11 changes: 6 additions & 5 deletions packages/primitive/src/Select/SelectItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import { ComponentType, forwardRef } from 'react';
import { useContext } from './context';
import { composeEventHandlers } from '@crossed/core';
import { composeEventHandlers, InferRef } from '@crossed/core';
import { RovingFocus } from '../utils/RovingFocus';
import type { RequiredAccessibilityProps } from '../types';

Expand All @@ -21,14 +21,15 @@ export const createSelectItem = <P extends Record<string, any>>(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
forwardRef<
any,
InferRef<typeof Styled>,
SelectItemProps & RequiredAccessibilityProps<P, 'aria-label'>
>(({ value, ...props }, ref) => {
>((originalProps, ref) => {
const { value, ...props } = originalProps as any;
const { setOpen, setValue } = useContext();
return (
<RovingFocus.Item ref={ref} focusable={!props.disabled}>
<RovingFocus.Item ref={ref} focusable={!(props as any).disabled}>
<Styled
tabIndex={props.disabled ? -1 : 0}
tabIndex={(props as any).disabled ? -1 : 0}
aria-disabled={((props as any).disabled || false).toString()}
role="menuitem"
{...(props as any)}
Expand Down
7 changes: 3 additions & 4 deletions packages/primitive/src/Select/SelectLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
* LICENSE file in the root of this projects source tree.
*/

import { forwardRef, type ComponentType } from 'react';
import { withDefaultProps } from '@crossed/core';
import type { ComponentType } from 'react';

export const createSelectLabel = <P,>(StyledRoot: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
return <StyledRoot role="separator" {...props} ref={ref} />;
});
withDefaultProps(StyledRoot, { role: 'separator' } as any);
6 changes: 3 additions & 3 deletions packages/primitive/src/Sheet/SheetOverlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@

import { ComponentType, forwardRef } from 'react';
import { useContext } from './context';
import { composeEventHandlers } from '@crossed/core';
import { composeEventHandlers, InferRef } from '@crossed/core';

export const createSheetOverlay = <P,>(Styled: ComponentType<P>) =>
forwardRef<any, P>((props, ref) => {
forwardRef<InferRef<typeof Styled>, P>((props, ref) => {
const { setOpen } = useContext();
return (
<Styled
{...props}
{...(props as any)}
onPress={composeEventHandlers((props as any).onPress, () => {
setOpen(false);
})}
Expand Down
10 changes: 5 additions & 5 deletions packages/styled/src/withReactive/withReactive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* LICENSE file in the root of this projects source tree.
*/

import React, { ComponentType, forwardRef } from 'react';
import React, { forwardRef, ForwardRefRenderFunction } from 'react';
import { useTheme } from '../useTheme';

export const withReactive = <P extends Record<string, any>>(
Comp: ComponentType<P>
export const withReactive = <Ref, P = {}>(
Comp: ForwardRefRenderFunction<Ref, P>
) =>
forwardRef<P['ref'], P>((props, ref) => {
forwardRef<Ref, P>((props, ref) => {
useTheme();
return <Comp {...props} ref={ref} />;
return <Comp {...(props as any)} ref={ref} />;
});
Loading

0 comments on commit 6dc2806

Please sign in to comment.