15073999364

Committed 16 May 2025 05:25PM UTC coverage: 90.323% (-2.8%) from 93.103%

Build # 15073999364

Build Type

push

github

Committed by

web-flow

Commit Message

feat: deprecate components (#9)

they are now available in [`@alessiofrittoli/react-components`](https://npmjs.com/package/@alessiofrittoli/react-components)

Run Details

11 of 12 branches covered (91.67%)

Branch coverage included in aggregate %.

1 of 2 new or added lines in 1 file covered. (50.0%)

17 of 19 relevant lines covered (89.47%)

3.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.0

/src/components/HOC/Stack.tsx

export type StackComponent<
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        T extends React.ElementType<React.PropsWithChildren<any>> = React.ElementType<React.PropsWithChildren<any>>,
        U extends Omit<React.ComponentProps<T>, 'children'> = Omit<React.ComponentProps<T>, 'children'>
> = T | ( [ T, U ] )


export type StackProps = React.PropsWithChildren<{
        /** An Array of Components or Component and props. The Component must accept and return children. */
        components?: StackComponent[]
}>


/**
 * Easily stack components avoiding creating a big Component stack pyramid.
 * 
 * @deprecated This Component is now part of [`@alessiofrittoli/react-components`](https://npmjs.com/package/@alessiofrittoli/react-components) and it will be removed since v1.0.0 release.
 * 
 * @example
 * 
 * #### Basic Component
 * 
 * ```tsx
 * const SomeComponent: React.FC<React.PropsWithChildren> = ( { children } ) => (
 *         <div>{ children }</div>
 * )
 * 
 * <Stack components={ [ SomeComponent ] }>
 *         any children
 * </Stack>
 * ```
 * 
 * ---
 * 
 * @example
 * 
 * #### Component with props
 * 
 * ```tsx
 * type SomeComponentProps = React.PropsWithChildren<{
 *         className?: string
 * }>
 * 
 * const SomeComponent: React.FC<SomeComponentProps> = ( {
 *         className, children,
 * } ) => <div className={ className }>{ children }</div>
 * 
 * <Stack components={ [
 *         [ SomeComponent, { className: 'test-class' } ] as StackComponent<typeof SomeComponent>
 * ] }>
 *         any children
 * </Stack>
 * ```
 */
export const Stack: React.FC<StackProps> = (
        { components = [], children }
) => (
        components.reduceRight( ( acc, Component ) => {
                if ( Array.isArray( Component ) ) {
                        const [ Comp, props ] = Component
                        return <Comp { ...props }>{ acc }</Comp>
                }
                return <Component>{ acc }</Component>
        }, children )
)

export const Prova: React.FC = () => {

        return (
                <Stack>

                </Stack>
        )

}

1	export type StackComponent<
2	// eslint-disable-next-line @typescript-eslint/no-explicit-any
3	T extends React.ElementType<React.PropsWithChildren<any>> = React.ElementType<React.PropsWithChildren<any>>,
4	U extends Omit<React.ComponentProps<T>, 'children'> = Omit<React.ComponentProps<T>, 'children'>
5	> = T \| ( [ T, U ] )
6
7
8	export type StackProps = React.PropsWithChildren<{
9	/** An Array of Components or Component and props. The Component must accept and return children. */
10	components?: StackComponent[]
11	}>
12
13
14	/**
15	* Easily stack components avoiding creating a big Component stack pyramid.
16	*
17	* @deprecated This Component is now part of [`@alessiofrittoli/react-components`](https://npmjs.com/package/@alessiofrittoli/react-components) and it will be removed since v1.0.0 release.
18	*
19	* @example
20	*
21	* #### Basic Component
22	*
23	* ```tsx
24	* const SomeComponent: React.FC<React.PropsWithChildren> = ( { children } ) => (
25	* <div>{ children }</div>
26	* )
27	*
28	* <Stack components={ [ SomeComponent ] }>
29	* any children
30	* </Stack>
31	* ```
32	*
33	* ---
34	*
35	* @example
36	*
37	* #### Component with props
38	*
39	* ```tsx
40	* type SomeComponentProps = React.PropsWithChildren<{
41	* className?: string
42	* }>
43	*
44	* const SomeComponent: React.FC<SomeComponentProps> = ( {
45	* className, children,
46	* } ) => <div className={ className }>{ children }</div>
47	*
48	* <Stack components={ [
49	* [ SomeComponent, { className: 'test-class' } ] as StackComponent<typeof SomeComponent>
50	* ] }>
51	* any children
52	* </Stack>
53	* ```
54	*/
55	export const Stack: React.FC<StackProps> = (	1✔
56	{ components = [], children }	1✔
57	) => (
58	components.reduceRight( ( acc, Component ) => {	5✔
59	if ( Array.isArray( Component ) ) {	5✔
60	const [ Comp, props ] = Component	1✔
61	return <Comp { ...props }>{ acc }</Comp>	1✔
62	}
63	return <Component>{ acc }</Component>	4✔
64	}, children )
65	)
66
67	export const Prova: React.FC = () => {	1✔
68
NEW 69	return (	×
70	<Stack>
71
72	</Stack>
73	)
74
75	}

alessiofrittoli / react-api / 15073999364

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous