Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

fix: compnent style config #443

Merged
merged 1 commit into from
Sep 18, 2023
Merged

fix: compnent style config #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
import {
AsForwarder,
createStyled,
styled1,
styled,
Theme,
useBreakpointValue,
useStyled,
Expand All @@ -40,6 +40,16 @@ const Pressable = styled(
{
bg: '$red200',
p: '$2',
props: {
variant: 'solid',
},
variants: {
variant: {
solid: {
bg: '$red400',
},
},
},
},
{
componentName: 'Pressable',
Expand Down Expand Up @@ -299,6 +309,12 @@ export function ContextBasedStylesContent() {
const renderItem = (item: any) => (
<Pressable
key={item}
variant="solid"
sx={{
props: {
variant: 'solid',
},
}}
// sx={{
// bg: '$amber400',
// }}
Expand Down
10 changes: 4 additions & 6 deletions packages/react/src/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -823,7 +823,7 @@ const getStyleIdsFromMap = (
return componentStyleObject;
};

export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
export function verboseStyled<P, Variants, ComCon>(
Component: React.ComponentType<P>,
theme: Partial<IVerbosedTheme<Variants, P>>,
componentStyleConfig: IComponentStyleConfig<ComCon> = {},
Expand Down Expand Up @@ -991,9 +991,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
// sxHash: BUILD_TIME_sxHash = '',
...componentProps
}: Omit<P, keyof Variants> &
Partial<
ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon, PluginType>
> &
Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
Partial<UtilityProps<ITypeReactNativeStyles>> & {
as?: any;
children?: any;
Expand Down Expand Up @@ -1862,7 +1860,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(

export function styled<P, Variants, ComCon, PluginType = unknown>(
Component: React.ComponentType<P>,
theme: ITheme<Variants, P, PluginType>,
theme: ITheme<Variants, P>,
componentStyleConfig?: IComponentStyleConfig<ComCon>,
ExtendedConfig?: ExtendedConfigType<PluginType>,
BUILD_TIME_PARAMS?: {
Expand Down Expand Up @@ -1894,7 +1892,7 @@ export function styled<P, Variants, ComCon, PluginType = unknown>(
theme = styledObj;
const sxConvertedObject = convertStyledToStyledVerbosed(theme);

let StyledComponent = verboseStyled<P, Variants, ComCon, PluginType>(
let StyledComponent = verboseStyled<P, Variants, ComCon>(
Component,
sxConvertedObject,
componentStyleConfig,
Expand Down
124 changes: 50 additions & 74 deletions packages/react/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export type GlueStackConfig<
components?: {
[key: string]: {
theme: Partial<GlobalStyles<IGlobalAliases, IToken, IGlobalStyle>>;
componentConfig?: IConfigProps;
componentConfig?: IComponentStyleConfig;
};
};
};
Expand Down Expand Up @@ -121,18 +121,10 @@ export type IMediaQueries = keyof GSConfig['tokens']['mediaQueries'];
export type SxStyleProps<
GenericComponentStyles,
Variants,
GenericComponentProps,
PluginType
GenericComponentProps
> = {
sx?: Partial<
SxProps<
GenericComponentStyles,
Variants,
GenericComponentProps,
'',
'',
PluginType
> & {
SxProps<GenericComponentStyles, Variants, GenericComponentProps, '', ''> & {
[Key in `@${IMediaQueries}`]?: SxProps<
GenericComponentStyles,
Variants,
Expand All @@ -147,13 +139,6 @@ export type SxStyleProps<
//@ts-ignore
type GlobalVariants = GSConfig['globalStyle']['variants'];

export interface IConfigProps {
descendantStyle: Array<string>;
ancestorStyle: Array<string>;
resolveProps: Array<string>;
componentName: string;
}

export type IComponentStyleConfig<ComCon = unknown> = Partial<
{
descendantStyle: any;
Expand All @@ -162,7 +147,6 @@ export type IComponentStyleConfig<ComCon = unknown> = Partial<
componentName: ComCon;
} & { [key: string]: any }
>;
export type ConfigType = Partial<IConfigProps> & { [key: string]: any };

export type Config = {
alias: { [K: string]: any };
Expand Down Expand Up @@ -276,23 +260,21 @@ export type GlobalStyles<AliasTypes, TokenTypes, Variants> = GlobalVariantSx<

/*********************** USER THEME / SX TYPES ****************************************/

export type ITheme<Variants, P, PluginType> = Partial<
export type ITheme<Variants, P> = Partial<
//@ts-ignore
StyledThemeProps<Variants, P['style'], P, PluginType>
StyledThemeProps<Variants, P['style'], P>
>;

export type StyledThemeProps<
Variants,
GenericComponentStyles,
GenericComponentProps,
PluginType
GenericComponentProps
> = SxProps<
GenericComponentStyles,
Variants & GlobalVariants,
GenericComponentProps,
'',
'',
PluginType
''
> & {
[Key in `@${IMediaQueries}`]: SxProps<
GenericComponentStyles,
Expand Down Expand Up @@ -405,8 +387,7 @@ export type SxProps<
Variants = unknown,
GenericComponentProps = unknown,
PLATFORM = '',
MediaQuery = '',
_PluginType = []
MediaQuery = ''
> = Partial<
StylePropsType<GenericComponentStyles, PLATFORM> &
PassingPropsType<
Expand Down Expand Up @@ -673,53 +654,48 @@ export interface GSConfig

/********************* COMPONENT PROPS TYPE *****************************************/

export type ComponentProps<
GenericComponentStyles,
Variants,
P,
ComCon,
PluginType
> = SxStyleProps<GenericComponentStyles, Variants, P, PluginType> & {
states?: {
[K in IState]?: boolean;
};
} & (GSConfig['globalStyle'] extends object
? {
[Key in keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>]?: keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key] extends 'true' | 'false'
? boolean
: keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key];
} & Omit<P, keyof Variants>
: {
[Key in keyof MergeNested<
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>]?: keyof MergeNested<
Variants, // @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key] extends 'true' | 'false'
? boolean
: keyof MergeNested<
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key];
});
export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
SxStyleProps<GenericComponentStyles, Variants, P> & {
states?: {
[K in IState]?: boolean;
};
} & (GSConfig['globalStyle'] extends object
? {
[Key in keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>]?: keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key] extends 'true' | 'false'
? boolean
: keyof MergeNestedThree<
GlobalVariants,
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key];
} & Omit<P, keyof Variants>
: {
[Key in keyof MergeNested<
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>]?: keyof MergeNested<
Variants, // @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key] extends 'true' | 'false'
? boolean
: keyof MergeNested<
Variants,
// @ts-ignore
Components[`${ComCon}`]['theme']['variants']
>[Key];
});

export type UtilityProps<GenericComponentStyles> = TokenizedRNStyleProps<
GetRNStyles<GenericComponentStyles>
Expand Down