From 97bcf8231dbb89fc0414703968abbbe34c1421bb Mon Sep 17 00:00:00 2001
From: "Mauro E. Bender" <mauro@amalgama.co>
Date: Tue, 20 Sep 2022 13:13:21 +0200
Subject: [PATCH] Allow variant prop to be set for pseudo-props component

---
 src/components/main/IconButton/types.ts  |  2 +-
 src/core/components/Components.ts        | 11 +++++++----
 src/core/components/types/config.ts      |  2 +-
 src/core/components/types/styledProps.ts |  5 +++++
 src/core/theme/Theme.ts                  |  4 ++--
 src/hooks/useComponentPropsResolver.tsx  |  4 ++--
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/main/IconButton/types.ts b/src/components/main/IconButton/types.ts
index a8cfb94..8856f3f 100644
--- a/src/components/main/IconButton/types.ts
+++ b/src/components/main/IconButton/types.ts
@@ -4,7 +4,7 @@ import type { IPressableProps } from '../Pressable/types';
 import type { IIconProps } from '../Icon/types';
 
 export interface IIconButtonProps extends Omit<IPressableProps, 'children' | 'size'>,
-	Omit<IIconProps, 'hitSlop' | 'style'>,
+	Omit<IIconProps, 'hitSlop' | 'style' | 'variant'>,
 	IHoverableComponent
 {
 	__icon?: ComponentBaseStyledProps<'Box'>
diff --git a/src/core/components/Components.ts b/src/core/components/Components.ts
index 92b60ba..ef97259 100644
--- a/src/core/components/Components.ts
+++ b/src/core/components/Components.ts
@@ -21,15 +21,18 @@ export default class Components {
 		{ variant, ...props }: PropsWithVariant,
 		state: ComponentState = {}
 	): ComponentStyledProps<C> {
-		const defaultProps: ComponentStyledProps<C> = this
+		const defaultProps = this
 			.defaultPropsFor( componentName ) || {};
 
-		const variantProps: ComponentStyledProps<C> = (
+		const variantProps = (
 			variant ? this.variantPropsFor( componentName, variant ) : undefined
 		) || {};
 
 		const resolvedProps: ComponentStyledProps<C> = merge(
-			{}, defaultProps, variantProps, props
+			{} as ComponentStyledProps<C>,
+			defaultProps,
+			variantProps,
+			props
 		);
 
 		return this.applyStateProps( resolvedProps, state );
@@ -44,7 +47,7 @@ export default class Components {
 	variantPropsFor<C extends ComponentName>(
 		componentName: C,
 		variantName: VariantName
-	): ComponentStyledProps<C> | undefined {
+	): Omit<ComponentStyledProps<C>, 'variant'> | undefined {
 		return this.configFor( componentName )?.variants?.[ variantName ];
 	}
 
diff --git a/src/core/components/types/config.ts b/src/core/components/types/config.ts
index 37bd1f2..09ad5b9 100644
--- a/src/core/components/types/config.ts
+++ b/src/core/components/types/config.ts
@@ -24,7 +24,7 @@ import type { ComponentName, VariantName } from './common';
 
 export type ComponentConfig<C extends ComponentName> = Partial<{
 	defaultProps: ComponentStyledProps<C>,
-	variants: Record<VariantName, ComponentStyledProps<C>>
+	variants: Record<VariantName, Omit<ComponentStyledProps<C>, 'variant'>>
 	sizes?: Record<string, string | number>
 }>;
 
diff --git a/src/core/components/types/styledProps.ts b/src/core/components/types/styledProps.ts
index 75a85d7..7803f87 100644
--- a/src/core/components/types/styledProps.ts
+++ b/src/core/components/types/styledProps.ts
@@ -31,12 +31,17 @@ export type ComponentBaseStyledProps<C extends ComponentName> = {
 	[K in (
 		keyof StyledProps
 		| keyof ComponentCustomProps<C>
+		| 'variant'
 		| 'size'
 	)]?:
 		K extends keyof StyledProps
 			? StyledProps[K]
 			: K extends keyof ComponentCustomProps<C>
 			? ComponentCustomProps<C>[K]
+			: K extends 'variant'
+			? C extends keyof IThemeConfig['components']
+				? VariantType<C>
+				: any
 			: K extends 'size'
 			? C extends keyof IThemeConfig['components']
 				? ComponentSizeType<C>
diff --git a/src/core/theme/Theme.ts b/src/core/theme/Theme.ts
index f5e2e9b..06c2ab1 100644
--- a/src/core/theme/Theme.ts
+++ b/src/core/theme/Theme.ts
@@ -11,7 +11,7 @@ import type {
 } from '../typography/types';
 import type Components from '../components/Components';
 import type {
-	ComponentName, ComponentState, PropsWithVariant, VariantName
+	ComponentName, ComponentState, ComponentStyledProps, VariantName
 } from '../components/types';
 import type Layout from '../layout/Layout';
 import type {
@@ -128,7 +128,7 @@ export default class Theme {
 
 	resolvePropsFor(
 		componentName: ComponentName,
-		props: PropsWithVariant,
+		props: ComponentStyledProps<ComponentName>,
 		state?: ComponentState
 	) {
 		return this._components.resolvePropsFor( componentName, props, state );
diff --git a/src/hooks/useComponentPropsResolver.tsx b/src/hooks/useComponentPropsResolver.tsx
index 9d6da89..5e11636 100644
--- a/src/hooks/useComponentPropsResolver.tsx
+++ b/src/hooks/useComponentPropsResolver.tsx
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import type {
-	ComponentName, ComponentState, PropsWithVariant, ComponentStyledProps
+	ComponentName, ComponentState, ComponentBaseStyledProps, ComponentStyledProps
 } from '../core/components/types';
 import { useTheme } from '../core/theme/hooks';
 
 const useComponentPropsResolver = <C extends ComponentName>(
 	componentName: C,
-	props: PropsWithVariant,
+	props: ComponentBaseStyledProps<C>,
 	state: ComponentState = {}
 ): ComponentStyledProps<C> => {
 	const theme = useTheme();