diff --git a/example/storybook/src/components/nb.config.ts b/example/storybook/src/components/nb.config.ts index 88b00deb1..684875eb0 100644 --- a/example/storybook/src/components/nb.config.ts +++ b/example/storybook/src/components/nb.config.ts @@ -728,7 +728,6 @@ export const config = createConfig({ }, }, }, - plugins: [new AnimationResolver({})], } as const); type ConfigType = typeof config; diff --git a/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx b/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx index 86b5455eb..5e630e00e 100644 --- a/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx +++ b/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx @@ -2,20 +2,27 @@ import React from 'react'; import { Wrapper } from '../../components/Wrapper'; import { Motion } from '@legendapp/motion'; import { Pressable, View } from 'react-native'; -import { styled } from '@gluestack-style/react'; +import { FontResolver, styled } from '@gluestack-style/react'; import { AnimationResolver } from '@gluestack-style/animation-plugin'; const images = [require('./1.png'), require('./2.png'), require('./3.png')]; const Box = styled(View, {}); -const StyledMotionImage = styled(Motion.Image, { - ':animate': { - zIndex: 1, - x: 0, - opacity: 1, +const StyledMotionImage = styled( + Motion.Image, + { + ':animate': { + zIndex: 1, + x: 0, + opacity: 1, + }, }, -}); + {}, + { + plugins: [new AnimationResolver({})], + } +); export function AnimationPlugin() { const [imageIndex, setImageIndex] = React.useState(0); @@ -35,31 +42,34 @@ export function AnimationPlugin() { 'aspectRatio': 1 * 1.4, }} > - {/* */} - - {/* */} + {/* @ts-ignore */} + + + {/* @ts-ignore */} + ( + styledObj = {}, + shouldUpdateConfig: any = true + ): { + // @ts-ignore + [key in keyof typeof this.styledUtils.aliases]: P[(typeof this.styledUtils.aliases)[key]]; + } { // this.#childrenExitPropsMap = deepClone(styledObj); - const resolvedAnimatedProps = this.updateStyledObject( styledObj, shouldUpdateConfig @@ -136,6 +144,7 @@ export class AnimationResolver implements IStyledPlugin { ); if (shouldUpdateConfig) { + // @ts-ignore return styledObj; } @@ -161,6 +170,7 @@ export class AnimationResolver implements IStyledPlugin { keyPath.pop(); } + // @ts-ignore if (aliases && aliases?.[prop]) { if (shouldUpdateConfig) { // this.#childrenExitPropsMap[prop] = styledObject[prop]; @@ -171,6 +181,7 @@ export class AnimationResolver implements IStyledPlugin { ); } const value = styledObject[prop]; + // @ts-ignore keyPath.push('props', aliases[prop]); setObjectKeyValue(resolvedStyledObject, keyPath, value); keyPath.pop(); @@ -245,9 +256,9 @@ export class AnimationResolver implements IStyledPlugin { Object.keys(restProps?.states ?? {}).forEach((state: any) => { isState = restProps.states[state] ? true : false; }); - const animatedProps = !isState - ? resolvedAnimatedStyledWithStyledObject?.props + ? // @ts-ignore + resolvedAnimatedStyledWithStyledObject?.props : {}; return ( diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index f6bb865ff..7f092f35d 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1824,11 +1824,11 @@ export function verboseStyled( return StyledComp; } -export function styled( +export function styled( Component: React.ComponentType

, - theme: ITheme, + theme: ITheme, componentStyleConfig?: IComponentStyleConfig, - ExtendedConfig?: ExtendedConfigType, + ExtendedConfig?: ExtendedConfigType, BUILD_TIME_PARAMS?: { orderedResolved: OrderedSXResolved; verbosedStyleIds: { @@ -1843,12 +1843,17 @@ export function styled( // const DEBUG = // process.env.NODE_ENV === 'development' && DEBUG_TAG ? false : false; - let styledObj: any = theme; - - const plugins = getInstalledPlugins(); + let styledObj = theme; + // @ts-ignore + let plugins: PluginType = [...getInstalledPlugins()]; + if (ExtendedConfig?.plugins) { + // @ts-ignore + plugins = [...plugins, ...ExtendedConfig?.plugins]; + } for (const pluginName in plugins) { - styledObj = plugins[pluginName]?.inputMiddleWare(styledObj, true, true); + // @ts-ignore + styledObj = plugins[pluginName]?.inputMiddleWare

(styledObj, true, true); } theme = styledObj; const sxConvertedObject = convertStyledToStyledVerbosed(theme); @@ -1860,9 +1865,12 @@ export function styled( ExtendedConfig, BUILD_TIME_PARAMS ); + // @ts-ignore plugins?.reverse(); for (const pluginName in plugins) { + // @ts-ignore if (plugins[pluginName]?.componentMiddleWare) { + // @ts-ignore StyledComponent = plugins[pluginName]?.componentMiddleWare({ Component: StyledComponent, theme, @@ -1874,8 +1882,10 @@ export function styled( for (const pluginName in plugins) { const compWrapper = + // @ts-ignore typeof plugins[pluginName].wrapperComponentMiddleWare === 'function' - ? plugins[pluginName].wrapperComponentMiddleWare() + ? // @ts-ignore + plugins[pluginName].wrapperComponentMiddleWare() : null; if (compWrapper) { diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index d881ef991..7f30d39f8 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -63,10 +63,16 @@ export type CreateConfig = { globalStyle?: CreateGenericConfig['globalStyle']; }; -export type ThemeStyles = { - // @ts-ignore - [key: string]: Tokens; -}; +export type ThemeStyles = Partial<{ + [key: string]: { + [key in keyof IToken]?: { + // @ts-ignore + [k in `$${keyof IToken[key]}`]?: // @ts-ignore + | `$${key}$${keyof IToken[key]}` + | (String & {}); + }; + }; +}>; // Generic Creator export type GlueStackConfig< @@ -78,7 +84,7 @@ export type GlueStackConfig< aliases: IGlobalAliases; globalStyle?: GlobalStyles; plugins?: Array; - themes?: ThemeStyles; + themes?: ThemeStyles; components?: { [key: string]: { theme: Partial>; @@ -164,9 +170,10 @@ type PropsResolveType = { props?: Partial; }; type PropertyResolverType = PropsResolveType & ResolverType; -export type ExtendedConfigType = { +export type ExtendedConfigType = { propertyTokenMap?: PropertyTokenMapType; propertyResolver?: PropertyResolverType; + plugins?: T; }; /*********************** GLOBAL STYLE TYPES ****************************************/ @@ -259,19 +266,23 @@ export type GlobalStyles = GlobalVariantSx< /*********************** USER THEME / SX TYPES ****************************************/ -export type ITheme = Partial< +export type ITheme = Partial< //@ts-ignore - StyledThemeProps + StyledThemeProps >; export type StyledThemeProps< Variants, GenericComponentStyles, - GenericComponentProps + GenericComponentProps, + PluginType > = SxProps< GenericComponentStyles, Variants & GlobalVariants, - GenericComponentProps + GenericComponentProps, + '', + '', + PluginType > & { [Key in `@${IMediaQueries}`]: SxProps< GenericComponentStyles, @@ -345,7 +356,8 @@ export type SxProps< Variants = unknown, GenericComponentProps = unknown, PLATFORM = '', - MediaQuery = '' + MediaQuery = '', + PluginType = [] > = Partial< StylePropsType & PassingPropsType< @@ -355,6 +367,14 @@ export type SxProps< MediaQuery > > & { + [key in keyof UnionToIntersection< + // @ts-ignore + ReturnType + >]: UnionToIntersection< + // @ts-ignore + ReturnType + >[key]; +} & { [Key in `_${COLORMODES}`]?: SxProps< GenericComponentStyles, Variants,