& { animationComponentGluestack: true }
+) => {
+ const Component = animatedComponent('SectionList', props);
+ return ;
+};
+const AnimatePresence = animatedComponent('AnimatePresence', {});
+
+AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
+AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';
+AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable';
+AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage';
+AnimatedScrollView.displayName =
+ 'Gluestack-AnimatedResolver-AnimatedScrollView';
+AnimatedSafeAreaView.displayName =
+ 'Gluestack-AnimatedResolver-AnimatedSafeAreaView';
+AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList';
+AnimatedSectionList.displayName =
+ 'Gluestack-AnimatedResolver-AnimatedSectionList';
+AnimatePresence.displayName =
+ 'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
+
+export {
+ AnimatedText,
+ AnimatedView,
+ AnimatedPressable,
+ AnimatedImage,
+ AnimatedScrollView,
+ AnimatedSafeAreaView,
+ AnimatedFlatList,
+ AnimatedSectionList,
+ AnimatePresence,
+};
diff --git a/packages/animation-resolver/src/index.tsx b/packages/animation-resolver/src/index.tsx
new file mode 100644
index 000000000..f46033641
--- /dev/null
+++ b/packages/animation-resolver/src/index.tsx
@@ -0,0 +1,368 @@
+import React, { useEffect, useMemo } from 'react';
+import type {
+ // @ts-ignore
+ IAnimationDriverPlugin,
+ IStyledPlugin,
+} from '@gluestack-style/react';
+import { useStyled } from '@gluestack-style/react';
+import { deepMerge, setObjectKeyValue, resolvedTokenization } from './utils';
+import { propertyTokenMap } from './propertyTokenMap';
+
+function tokenizeAnimationPropsFromConfig(
+ props: any = {},
+ config: any,
+ animationAliases: any,
+ path: any = [],
+ tokenizedAnimatedProps: any = {}
+) {
+ for (const prop in props) {
+ if (Array.isArray(props[prop])) {
+ path.push(prop);
+ setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
+ path.pop();
+ } else if (animationAliases[prop]) {
+ path.push(prop);
+ const tokenizedValue = resolvedTokenization(props[prop], config);
+ setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
+ path.pop();
+ } else if (typeof props[prop] === 'object') {
+ path.push(prop);
+ const tokenizedValue = resolvedTokenization(props[prop], config);
+ setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
+ // path.pop();
+ tokenizeAnimationPropsFromConfig(
+ props[prop],
+ config,
+ animationAliases,
+ path,
+ tokenizedAnimatedProps
+ );
+ path.pop();
+ } else {
+ path.push(prop);
+ setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
+ path.pop();
+ }
+ }
+
+ return tokenizedAnimatedProps;
+}
+
+function getVariantProps(props: any, theme: any) {
+ const variantTypes = theme?.variants ? Object.keys(theme.variants) : [];
+
+ const restProps = { ...props };
+
+ const variantProps: any = {};
+ variantTypes?.forEach((variant) => {
+ if (props[variant]) {
+ variantProps[variant] = props[variant];
+ // delete restProps[variant];
+ }
+ });
+
+ return {
+ variantProps,
+ restProps,
+ };
+}
+
+function resolveVariantAnimationProps(variantProps: any, styledObject: any) {
+ let resolvedVariant = {};
+ Object.keys(variantProps).forEach((variant) => {
+ const variantValue = variantProps[variant];
+ const variantObject = styledObject?.variants?.[variant]?.[variantValue];
+
+ resolvedVariant = deepMerge(resolvedVariant, variantObject);
+ });
+
+ return resolvedVariant;
+}
+
+export class AnimationResolver implements IStyledPlugin {
+ name: 'AnimationResolver';
+ componentDriver: IAnimationDriverPlugin;
+ config = {
+ aliases: {
+ ':animate': 'animate',
+ ':initial': 'initial',
+ ':exit': 'exit',
+ ':initialProps': 'initialProps',
+ ':animateProps': 'animateProps',
+ ':transition': 'transition',
+ ':transformOrigin': 'transformOrigin',
+ ':whileTap': 'whileTap',
+ ':whileHover': 'whileHover',
+ ':onAnimationComplete': 'onAnimationComplete',
+ } as const,
+ tokens: {} as const,
+ animatedPropMap: {} as any,
+ };
+
+ AnimatePresenceComp = React.Fragment;
+
+ register(config: any) {
+ if (this.config) {
+ if (config?.aliases) {
+ this.config.aliases = {
+ ...this.config?.aliases,
+ ...config?.aliases,
+ };
+ }
+
+ if (config?.tokens) {
+ this.config.tokens = {
+ ...this.config?.tokens,
+ ...config?.tokens,
+ };
+ }
+ if (config?.animatedPropMap) {
+ this.config.animatedPropMap = {
+ ...this.config?.animatedPropMap,
+ ...config?.animatedPropMap,
+ };
+ }
+ // @ts-ignore
+ this.config.ref = config?.ref;
+ }
+ }
+
+ constructor(ComponentDriverClass: any, config: any = {}) {
+ // @ts-ignore
+ const componentDriver = new ComponentDriverClass(config);
+ this.name = 'AnimationResolver';
+ this.componentDriver = componentDriver;
+ if (componentDriver.engine.AnimatePresence) {
+ this.AnimatePresenceComp = componentDriver.engine.AnimatePresence;
+ }
+ this.register(componentDriver.config);
+ }
+
+ #childrenExitPropsMap: any = {};
+
+ #extendedConfig: any = {};
+
+ inputMiddleWare(
+ styledObj = {},
+ shouldUpdateConfig: any = true,
+ _?: boolean,
+ Component?: React.ComponentType
+ ): {
+ // @ts-ignore
+ [key in keyof typeof this.config.aliases]: P[(typeof this.config.aliases)[key]];
+ } {
+ if (
+ Component &&
+ (Component.displayName?.startsWith(
+ 'Gluestack-AnimatedResolver-Animated'
+ ) ||
+ // @ts-ignore
+ Component.isAnimatedComponent)
+ ) {
+ let AnimatedComponent =
+ this.componentDriver.engine[
+ // @ts-ignore
+ Component.displayName?.replace(
+ 'Gluestack-AnimatedResolver-Animated',
+ ''
+ )
+ ];
+
+ if (AnimatedComponent) {
+ AnimatedComponent.isAnimatedComponent = true;
+ }
+ if (!AnimatedComponent) {
+ AnimatedComponent = Component;
+ }
+
+ // this.#childrenExitPropsMap = deepClone(styledObj);
+ const resolvedAnimatedProps = this.updateStyledObject(
+ styledObj,
+ shouldUpdateConfig
+ );
+
+ const resolvedStyledObjectWithAnimatedProps = deepMerge(
+ styledObj,
+ resolvedAnimatedProps
+ );
+
+ // if (shouldUpdateConfig) {
+ // // @ts-ignore
+ // return [styledObj, shouldUpdateConfig, _, AnimatedComponent];
+ // }
+
+ // @ts-ignore
+
+ return [
+ resolvedStyledObjectWithAnimatedProps,
+ shouldUpdateConfig,
+ _,
+ AnimatedComponent,
+ ];
+ }
+ // @ts-ignore
+ return [styledObj, shouldUpdateConfig, _, Component];
+ }
+
+ updateStyledObject(
+ styledObject: any = {},
+ shouldUpdateConfig: boolean,
+ resolvedStyledObject: any = {},
+ keyPath: string[] = []
+ ) {
+ const aliases = this.config?.aliases;
+ const animatedPropMap = this.config?.animatedPropMap;
+ for (const prop in styledObject) {
+ if (typeof styledObject[prop] === 'object') {
+ keyPath.push(prop);
+ this.updateStyledObject(
+ styledObject[prop],
+ shouldUpdateConfig,
+ resolvedStyledObject,
+ keyPath
+ );
+ keyPath.pop();
+ }
+
+ // @ts-ignore
+ if (aliases && aliases?.[prop]) {
+ if (shouldUpdateConfig) {
+ // this.#childrenExitPropsMap[prop] = styledObject[prop];
+ setObjectKeyValue(
+ this.#childrenExitPropsMap,
+ [...keyPath, prop],
+ styledObject[prop]
+ );
+ }
+ const value = styledObject[prop];
+
+ if (keyPath[keyPath.length - 1] === 'style') {
+ keyPath.pop();
+ }
+ // @ts-ignore
+ keyPath.push('props', aliases[prop]);
+ // setObjectKeyValue(resolvedStyledObject, keyPath, value);
+
+ setObjectKeyValue(resolvedStyledObject, keyPath, value);
+ keyPath.pop();
+ keyPath.pop();
+ // delete styledObject[prop];
+ }
+
+ if (animatedPropMap && animatedPropMap[prop]) {
+ this.renameObjectKey(styledObject, prop, animatedPropMap[prop]);
+ }
+ }
+ return resolvedStyledObject;
+ }
+
+ renameObjectKey(obj: any, from: string, to: string) {
+ obj[to] = obj[from];
+ delete obj[from];
+ return obj;
+ }
+
+ componentMiddleWare({ Component, ExtendedConfig }: any) {
+ if (Component && Component?.isAnimatedComponent) {
+ const styledConfig = this.#childrenExitPropsMap;
+
+ this.#childrenExitPropsMap = {};
+
+ const NewComponent = React.forwardRef((props: any, ref?: any) => {
+ const { sx, ...rest } = props;
+
+ const styledContext = useStyled();
+ useEffect(() => {
+ if (!styledContext.animationDriverData) {
+ styledContext.setAnimationDriverData(this.componentDriver);
+ }
+ }, [styledContext]);
+ const CONFIG = useMemo(
+ () => ({
+ ...styledContext.config,
+ propertyTokenMap,
+ }),
+ [styledContext.config]
+ );
+ this.#extendedConfig = CONFIG;
+ if (ExtendedConfig) {
+ this.#extendedConfig = deepMerge(CONFIG, ExtendedConfig);
+ }
+
+ let tokenizedAnimatedProps: any = {};
+ const { variantProps, restProps } = getVariantProps(rest, styledConfig);
+ const variantStyledObject = resolveVariantAnimationProps(
+ variantProps,
+ styledConfig
+ );
+ const componentStyledObject = deepMerge(
+ variantStyledObject,
+ styledConfig
+ );
+
+ const animationAliases = this.config?.aliases;
+
+ const config = this.#extendedConfig;
+
+ tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(
+ componentStyledObject,
+ config,
+ animationAliases
+ );
+
+ const tokenizedSxAnimationProps: any = tokenizeAnimationPropsFromConfig(
+ sx,
+ config,
+ animationAliases
+ );
+
+ const mergedAnimatedProps = deepMerge(
+ tokenizedAnimatedProps,
+ tokenizedSxAnimationProps
+ );
+
+ // @ts-ignore
+ const [resolvedAnimatedStyledWithStyledObject, , ,] =
+ this.inputMiddleWare(mergedAnimatedProps, false, false, Component);
+ let isState = false;
+
+ Object.keys(restProps?.states ?? {}).forEach((state: any) => {
+ isState = restProps.states[state] ? true : false;
+ });
+ const animatedProps = !isState
+ ? // @ts-ignore
+ resolvedAnimatedStyledWithStyledObject?.props
+ : {};
+
+ return (
+
+ );
+ });
+
+ if (NewComponent) {
+ //@ts-ignore
+ NewComponent.styled = {};
+ //@ts-ignore
+ NewComponent.styled.config = {};
+ //@ts-ignore
+ NewComponent.styled.config = styledConfig;
+ //@ts-ignore
+ NewComponent.isStyledComponent = Component?.isStyledComponent;
+ //@ts-ignore
+ NewComponent.isComposedComponent = Component?.isComposedComponent;
+
+ NewComponent.displayName = Component?.displayName;
+ return NewComponent;
+ }
+ } else {
+ return Component;
+ }
+ }
+}
+
+export * from './AnimatedComponents';
diff --git a/packages/animation-resolver/src/propertyTokenMap.ts b/packages/animation-resolver/src/propertyTokenMap.ts
new file mode 100644
index 000000000..0913ca47d
--- /dev/null
+++ b/packages/animation-resolver/src/propertyTokenMap.ts
@@ -0,0 +1,183 @@
+const borderStyles = 'borderStyles';
+const borderWidths = 'borderWidths';
+const colors = 'colors';
+const mediaQueries = 'mediaQueries';
+const opacity = 'opacity';
+const fonts = 'fonts';
+const fontSizes = 'fontSizes';
+const fontWeights = 'fontWeights';
+const letterSpacings = 'letterSpacings';
+const lineHeights = 'lineHeights';
+const radii = 'radii';
+const shadows = 'shadows';
+// const sizes = 'sizes';
+const space = 'space';
+const transitions = 'transitions';
+const zIndices = 'zIndices';
+export const propertyTokenMap = {
+ gap: space,
+ gridGap: space,
+ columnGap: space,
+ gridColumnGap: space,
+ rowGap: space,
+ gridRowGap: space,
+ inset: space,
+ insetBlock: space,
+ insetBlockEnd: space,
+ insetBlockStart: space,
+ insetInline: space,
+ insetInlineEnd: space,
+ insetInlineStart: space,
+ margin: space,
+ marginTop: space,
+ marginRight: space,
+ marginBottom: space,
+ marginLeft: space,
+ marginBlock: space,
+ marginBlockEnd: space,
+ marginBlockStart: space,
+ marginInline: space,
+ marginInlineEnd: space,
+ marginInlineStart: space,
+
+ marginHorizontal: space,
+ marginVertical: space,
+ padding: space,
+ paddingTop: space,
+ paddingRight: space,
+ paddingBottom: space,
+ paddingLeft: space,
+
+ paddingBlock: space,
+ paddingBlockEnd: space,
+ paddingBlockStart: space,
+ paddingInline: space,
+ paddingInlineEnd: space,
+ paddingInlineStart: space,
+
+ paddingHorizontal: space,
+ paddingVertical: space,
+ paddingStart: space,
+ paddingEnd: space,
+
+ top: space,
+ right: space,
+ bottom: space,
+ left: space,
+ scrollMargin: space,
+ scrollMarginTop: space,
+ scrollMarginRight: space,
+ scrollMarginBottom: space,
+ scrollMarginLeft: space,
+ scrollMarginX: space,
+ scrollMarginY: space,
+ scrollMarginBlock: space,
+ scrollMarginBlockEnd: space,
+ scrollMarginBlockStart: space,
+ scrollMarginInline: space,
+ scrollMarginInlineEnd: space,
+ scrollMarginInlineStart: space,
+ scrollPadding: space,
+ scrollPaddingTop: space,
+ scrollPaddingRight: space,
+ scrollPaddingBottom: space,
+ scrollPaddingLeft: space,
+ scrollPaddingX: space,
+ scrollPaddingY: space,
+ scrollPaddingBlock: space,
+ scrollPaddingBlockEnd: space,
+ scrollPaddingBlockStart: space,
+ scrollPaddingInline: space,
+ scrollPaddingInlineEnd: space,
+ scrollPaddingInlineStart: space,
+ // shadowOffset: space,
+ shadowRadius: space,
+ elevation: space,
+
+ fontSize: fontSizes,
+
+ background: colors,
+ backgroundColor: colors,
+ backgroundImage: colors,
+ borderImage: colors,
+ border: colors,
+ borderBlock: colors,
+ borderBlockEnd: colors,
+ borderBlockStart: colors,
+ borderBottom: colors,
+ borderBottomColor: colors,
+ borderColor: colors,
+ borderInline: colors,
+ borderInlineEnd: colors,
+ borderInlineStart: colors,
+ borderLeft: colors,
+ borderLeftColor: colors,
+ borderRight: colors,
+ borderRightColor: colors,
+ borderTop: colors,
+ borderTopColor: colors,
+ caretColor: colors,
+ color: colors,
+ columnRuleColor: colors,
+ fill: colors,
+ outline: colors,
+ outlineColor: colors,
+ stroke: colors,
+ textDecorationColor: colors,
+ shadowColor: colors,
+
+ shadowOpacity: opacity,
+
+ shadow: shadows,
+ // Media Query
+ condition: mediaQueries,
+
+ fontFamily: fonts,
+
+ fontWeight: fontWeights,
+
+ lineHeight: lineHeights,
+
+ letterSpacing: letterSpacings,
+
+ blockSize: space,
+ minBlockSize: space,
+ maxBlockSize: space,
+ inlineSize: space,
+ minInlineSize: space,
+ maxInlineSize: space,
+ width: space,
+ minWidth: space,
+ maxWidth: space,
+ height: space,
+ minHeight: space,
+ maxHeight: space,
+ flexBasis: space,
+ gridTemplateColumns: space,
+ gridTemplateRows: space,
+
+ borderWidth: borderWidths,
+ borderTopWidth: borderWidths,
+ borderRightWidth: borderWidths,
+ borderBottomWidth: borderWidths,
+ borderLeftWidth: borderWidths,
+
+ borderStyle: borderStyles,
+ borderTopStyle: borderStyles,
+ borderRightStyle: borderStyles,
+ borderBottomStyle: borderStyles,
+ borderLeftStyle: borderStyles,
+
+ borderRadius: radii,
+ borderTopLeftRadius: radii,
+ borderTopRightRadius: radii,
+ borderBottomRightRadius: radii,
+ borderBottomLeftRadius: radii,
+
+ boxShadow: colors,
+ textShadow: shadows,
+
+ transition: transitions,
+
+ zIndex: zIndices,
+} as const;
diff --git a/packages/animation-resolver/src/utils.ts b/packages/animation-resolver/src/utils.ts
new file mode 100644
index 000000000..1c4be87d1
--- /dev/null
+++ b/packages/animation-resolver/src/utils.ts
@@ -0,0 +1,231 @@
+export const deepClone = (obj: any) => JSON.parse(JSON.stringify(obj));
+
+export const deepMerge = (target: any = {}, source: any) => {
+ for (const key in source) {
+ if (source.hasOwnProperty(key)) {
+ if (typeof target[key] === 'object' && typeof source[key] === 'object') {
+ deepMerge(target[key], source[key]);
+ } else {
+ target[key] = source[key];
+ }
+ }
+ }
+ return target;
+};
+
+export const setObjectKeyValue = (obj: any, keys: any, value: any) => {
+ let current = obj;
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i];
+ if (i === keys.length - 1) {
+ // we've reached the desired key, so update its value
+ current[key] = value;
+ } else {
+ // we're still traversing the object, so create the key if it doesn't exist
+ if (!current[key]) {
+ current[key] = {};
+ }
+ current = current[key];
+ }
+ }
+ return obj;
+};
+
+export function deepMergeObjects(...objects: any) {
+ const isObject = (obj: any) => obj && typeof obj === 'object';
+
+ return objects.reduce((prev: any, obj: any) => {
+ if (isObject(prev) && isObject(obj)) {
+ Object.keys(obj).forEach((key) => {
+ if (isObject(obj[key])) {
+ if (!prev[key] || !isObject(prev[key])) {
+ prev[key] = {};
+ }
+ prev[key] = deepMerge(prev[key], obj[key]);
+ } else {
+ prev[key] = obj[key];
+ }
+ });
+ }
+ return prev;
+ }, {});
+}
+
+export function resolvedTokenization(props: any, config: any) {
+ const aliasedResolvedProps = resolveAliasesFromConfig(config, props);
+ const newProps = resolveTokensFromConfig(config, aliasedResolvedProps);
+ return newProps;
+}
+
+export function resolveAliasesFromConfig(config: any, props: any) {
+ const aliasResolvedProps: any = {};
+
+ Object.keys(props).map((key) => {
+ if (config?.aliases?.[key]) {
+ aliasResolvedProps[config.aliases?.[key]] = props[key];
+ } else {
+ aliasResolvedProps[key] = props[key];
+ }
+ });
+ return aliasResolvedProps;
+}
+
+export function resolveTokensFromConfig(config: any, props: any) {
+ let newProps: any = {};
+
+ Object.keys(props).map((prop: any) => {
+ const value = props[prop];
+
+ newProps[prop] = getResolvedTokenValueFromConfig(
+ config,
+ props,
+ prop,
+ value
+ );
+ });
+ // console.log('&&&&&', newProps);
+
+ return newProps;
+}
+
+export function getResolvedTokenValueFromConfig(
+ config: any,
+ _props: any,
+ prop: any,
+ value: any
+) {
+ let resolvedTokenValue = getTokenFromConfig(config, prop, value);
+
+ // Special case for token ends with em on mobile
+ // This will work for lineHeight and letterSpacing
+ // console.log('hello from token ends with em on mobile', resolvedTokenValue);
+ // if (
+ // typeof resolvedTokenValue === 'string' &&
+ // resolvedTokenValue.endsWith('em') &&
+ // Platform.OS !== 'web'
+ // ) {
+ // const fontSize = getTokenFromConfig(config, 'fontSize', props?.fontSize);
+ // resolvedTokenValue =
+ // parseFloat(resolvedTokenValue) * parseFloat(fontSize ?? BASE_FONT_SIZE);
+ // }
+
+ return resolvedTokenValue;
+}
+
+export const getTokenFromConfig = (config: any, prop: any, value: any) => {
+ const aliasTokenType = config.propertyTokenMap[prop];
+
+ // const tokenScale = config?.tokens?.[aliasTokenType];
+ let token;
+
+ // resolveStringToken(value, config, config.propertyTokenMap);
+ if (typeof value === 'string' && value.includes('$')) {
+ if (config.propertyResolver?.[prop]) {
+ let transformer = config.propertyResolver?.[prop];
+ token = transformer(value, (value1: any, scale = aliasTokenType) =>
+ resolveStringToken(value1, config, config.propertyTokenMap, prop, scale)
+ );
+ } else {
+ token = resolveStringToken(value, config, config.propertyTokenMap, prop);
+ }
+ } else {
+ if (config.propertyResolver?.[prop]) {
+ let transformer = config.propertyResolver?.[prop];
+ token = transformer(value, (value: any, scale = aliasTokenType) => {
+ if (typeof value === 'string' && value.includes('$')) {
+ return resolveStringToken(
+ value,
+ config,
+ config.propertyTokenMap,
+ prop,
+ scale
+ );
+ } else {
+ return value;
+ }
+ });
+ } else {
+ token = value;
+ }
+ // console.log(token, typeof token, prop, '******');
+ }
+
+ return token;
+};
+
+function isNumeric(str: string) {
+ return typeof str === 'number' ? true : false;
+ // return /^[-+]?[0-9]*\.?[0-9]+$/.test(str);
+}
+export function resolveStringToken(
+ string: string,
+ config: any,
+ tokenScaleMap: any,
+ propName: any,
+ scale?: any
+) {
+ let typeofResult = 'string';
+ const token_scale = scale ?? tokenScaleMap[propName];
+
+ const splitTokenBySpace = string.split(' ');
+
+ const result: any = splitTokenBySpace.map((currentToken) => {
+ let splitCurrentToken = currentToken.split('$');
+
+ if (currentToken.startsWith('$')) {
+ splitCurrentToken = splitCurrentToken.slice(1);
+ }
+
+ if (splitCurrentToken.length > 1) {
+ const tokenValue = getObjectProperty(config.tokens, splitCurrentToken);
+ typeofResult = typeof tokenValue;
+ return tokenValue;
+ } else {
+ if (tokenScaleMap[propName]) {
+ if (!config || !config.tokens) {
+ throw new Error(
+ 'You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.'
+ );
+ }
+ if (
+ config?.tokens[token_scale] &&
+ config?.tokens[token_scale].hasOwnProperty(splitCurrentToken[0])
+ ) {
+ const tokenValue = config?.tokens[token_scale][splitCurrentToken[0]];
+ typeofResult = typeof tokenValue;
+
+ if (typeof tokenValue !== 'undefined' && tokenValue !== null) {
+ return tokenValue;
+ } else {
+ return '';
+ }
+ }
+ }
+ return splitCurrentToken[splitCurrentToken.length - 1];
+ }
+ });
+
+ let finalResult = result;
+
+ if (finalResult === '') {
+ return undefined;
+ } else {
+ finalResult = result.join(' ');
+
+ if (isNumeric(finalResult) || typeofResult === 'number') {
+ return parseFloat(finalResult);
+ } else {
+ return finalResult;
+ }
+ }
+}
+
+export const getObjectProperty = (object: any, keyPath: any) => {
+ if (!Array.isArray(keyPath)) {
+ keyPath = [keyPath];
+ }
+ return keyPath.reduce(
+ (baseObj: any, key: any) => baseObj && baseObj[key],
+ object
+ );
+};
diff --git a/packages/animation-resolver/tsconfig.json b/packages/animation-resolver/tsconfig.json
new file mode 100644
index 000000000..a72b0b039
--- /dev/null
+++ b/packages/animation-resolver/tsconfig.json
@@ -0,0 +1,31 @@
+{
+ "include": ["./src"],
+ "exclude": ["node_modules", "example"],
+ "path": {
+ "@gluestack-style/react": ["../react/src"]
+ },
+ "compilerOptions": {
+ "emitDeclarationOnly": true,
+ "noEmit": false,
+ "baseUrl": ".",
+ "declaration": true,
+ "allowUnreachableCode": false,
+ "allowUnusedLabels": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "lib": ["esnext", "dom"],
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noFallthroughCasesInSwitch": true,
+ "noImplicitReturns": true,
+ "noImplicitUseStrict": false,
+ "noStrictGenericChecks": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "target": "esnext"
+ }
+}
diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json
index e3041317a..2250aafd1 100644
--- a/packages/babel-plugin-styled-resolver/package.json
+++ b/packages/babel-plugin-styled-resolver/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-style/babel-plugin-styled-resolver",
- "version": "0.2.6",
+ "version": "1.0.0-alpha.0",
"description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.",
"keywords": [
"css-in-js",
@@ -20,7 +20,7 @@
"dev:web": "cd example/native && yarn web --clear"
},
"peerDependencies": {
- "@gluestack-style/react": "^0.1.11"
+ "@gluestack-style/react": ">=0.1"
},
"devDependencies": {
"@babel/cli": "^7.19.3",
diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js
index 407909053..2a005fd37 100644
--- a/packages/babel-plugin-styled-resolver/src/index.js
+++ b/packages/babel-plugin-styled-resolver/src/index.js
@@ -89,6 +89,24 @@ const convertExpressionContainerToStaticObject = (
};
};
+function findThemeAndComponentConfig(node) {
+ let themeNode = null;
+ let componentConfigNode = null;
+ node.forEach((prop) => {
+ const propKey = prop.key.name ? prop.key.name : prop.key.value;
+ if (propKey === 'theme') {
+ themeNode = prop;
+ } else if (propKey === 'componentConfig') {
+ componentConfigNode = prop;
+ }
+ });
+
+ return {
+ themeNode,
+ componentConfigNode,
+ };
+}
+
function addQuotesToObjectKeys(code) {
const ast = babel.parse(`var a = ${code}`, {
presets: [babelPresetTypeScript],
@@ -222,11 +240,97 @@ function getConfig(configPath) {
);
}
}
-function getSurroundingCharacters(string, index) {
- let start = Math.max(0, index - 5);
- let end = Math.min(string.length, index + 6);
- return string.slice(start, end);
+
+function getBuildTimeParams(
+ theme,
+ componentConfig,
+ extendedConfig,
+ outputLibrary,
+ platform,
+ type
+) {
+ let mergedPropertyConfig = {
+ ...ConfigDefault?.propertyTokenMap,
+ ...propertyTokenMap,
+ };
+ let componentExtendedConfig = merge(
+ {},
+ {
+ ...ConfigDefault,
+ propertyTokenMap: { ...mergedPropertyConfig },
+ }
+ );
+
+ if (theme && Object.keys(theme).length > 0) {
+ const verbosedTheme = convertStyledToStyledVerbosed(theme);
+
+ let componentHash = stableHash({
+ ...theme,
+ ...componentConfig,
+ });
+
+ if (outputLibrary) {
+ componentHash = outputLibrary + '-' + componentHash;
+ }
+
+ const { styledIds, verbosedStyleIds } = updateOrderUnResolvedMap(
+ verbosedTheme,
+ componentHash,
+ type,
+ componentConfig,
+ BUILD_TIME_GLUESTACK_STYLESHEET,
+ platform
+ );
+
+ const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve(
+ styledIds,
+ componentExtendedConfig,
+ {}
+ );
+
+ const current_global_map = BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();
+
+ const orderedResolvedTheme = [];
+
+ current_global_map?.forEach((styledResolved) => {
+ if (styledIds.includes(styledResolved?.meta?.cssId)) {
+ orderedResolvedTheme.push(styledResolved);
+ }
+ });
+
+ const styleIdsAst = generateObjectAst(verbosedStyleIds);
+
+ const toBeInjectedAst = generateObjectAst(toBeInjected);
+
+ const orderedResolvedAst = generateArrayAst(orderedResolvedTheme);
+
+ const orderedStyleIdsArrayAst = types.arrayExpression(
+ styledIds?.map((cssId) => types.stringLiteral(cssId))
+ );
+
+ const resultParamsNode = types.objectExpression([
+ types.objectProperty(
+ types.stringLiteral('orderedResolved'),
+ orderedResolvedAst
+ ),
+ types.objectProperty(
+ types.stringLiteral('toBeInjected'),
+ toBeInjectedAst
+ ),
+ types.objectProperty(
+ types.stringLiteral('styledIds'),
+ orderedStyleIdsArrayAst
+ ),
+ types.objectProperty(
+ types.stringLiteral('verbosedStyleIds'),
+ styleIdsAst
+ ),
+ ]);
+ return resultParamsNode;
+ }
+ return null;
}
+
function getExportedConfigFromFileString(fileData) {
if (!fileData) {
return {};
@@ -375,6 +479,48 @@ function getIdentifiersObjectFromAstNode(node) {
);
}
+function generateObjectAst(obj) {
+ let properties = Object.entries(obj).map(([key, value]) => {
+ if (typeof value === 'undefined') {
+ return;
+ } else if (typeof value === 'object' && !Array.isArray(value)) {
+ return types.objectProperty(
+ types.stringLiteral(key),
+ generateObjectAst(value)
+ );
+ } else if (typeof value === 'object' && Array.isArray(value)) {
+ let elements = value.map((obj) => {
+ if (typeof obj === 'string') {
+ return types.stringLiteral(obj);
+ } else {
+ return generateObjectAst(obj);
+ }
+ });
+ return types.objectProperty(
+ types.stringLiteral(key),
+ types.arrayExpression(elements)
+ );
+ } else if (typeof value === 'boolean') {
+ return types.objectProperty(
+ types.stringLiteral(key),
+ types.booleanLiteral(value)
+ );
+ } else {
+ return types.objectProperty(
+ types.stringLiteral(key),
+ typeof value === 'number'
+ ? types.numericLiteral(value)
+ : types.stringLiteral(value)
+ );
+ }
+ });
+
+ return types.objectExpression(properties.filter((property) => property));
+}
+function generateArrayAst(arr) {
+ return types.arrayExpression(arr.map((obj) => generateObjectAst(obj)));
+}
+
function isImportedFromLibrary(libraries, importName) {
if (libraries.includes(importName)) {
return true;
@@ -406,41 +552,6 @@ let ConfigDefault = CONFIG;
module.exports = function (b) {
const { types: t } = b;
- function generateObjectAst(obj) {
- let properties = Object.entries(obj).map(([key, value]) => {
- if (typeof value === 'undefined') {
- return;
- } else if (typeof value === 'object' && !Array.isArray(value)) {
- return t.objectProperty(t.stringLiteral(key), generateObjectAst(value));
- } else if (typeof value === 'object' && Array.isArray(value)) {
- let elements = value.map((obj) => {
- if (typeof obj === 'string') {
- return t.stringLiteral(obj);
- } else {
- return generateObjectAst(obj);
- }
- });
- return t.objectProperty(
- t.stringLiteral(key),
- t.arrayExpression(elements)
- );
- } else if (typeof value === 'boolean') {
- return t.objectProperty(t.stringLiteral(key), t.booleanLiteral(value));
- } else {
- return t.objectProperty(
- t.stringLiteral(key),
- typeof value === 'number'
- ? t.numericLiteral(value)
- : t.stringLiteral(value)
- );
- }
- });
-
- return t.objectExpression(properties.filter((property) => property));
- }
- function generateArrayAst(arr) {
- return t.arrayExpression(arr.map((obj) => generateObjectAst(obj)));
- }
function checkWebFileExists(filePath) {
if (filePath.includes('node_modules')) {
return false;
@@ -469,6 +580,10 @@ module.exports = function (b) {
let isStyledPathConfigured = false;
let isComponentsPathConfigured = false;
let targetPlatform = process.env.GLUESTACK_STYLE_TARGET;
+ let createStyleImportedName = '';
+ let createComponentsImportedName = '';
+ const CREATE_STYLE = 'createStyle';
+ const CREATE_COMPONENTS = 'createComponents';
return {
name: 'ast-transform', // not required
@@ -554,6 +669,15 @@ module.exports = function (b) {
if (importSpecifierPath.node.imported.name === 'styled') {
styledImportName = importSpecifierPath.node.local.name;
}
+ if (importSpecifierPath.node.imported.name === CREATE_STYLE) {
+ createStyleImportedName = importSpecifierPath.node.local.name;
+ }
+ if (
+ importSpecifierPath.node.imported.name === CREATE_COMPONENTS
+ ) {
+ createComponentsImportedName =
+ importSpecifierPath.node.local.name;
+ }
if (importSpecifierPath.node.imported.name === styledAlias) {
styledAliasImportedName = importSpecifierPath.node.local.name;
}
@@ -575,28 +699,35 @@ module.exports = function (b) {
}
}
},
-
CallExpression(callExpressionPath) {
- if (
- callExpressionPath.node.callee.name === styledAliasImportedName ||
- callExpressionPath.node.callee.name === styledImportName
- ) {
- let componentName = callExpressionPath?.parent?.id?.name;
-
- if (componentName) {
- guessingStyledComponents.push(componentName);
- }
- callExpressionPath.traverse({
- ObjectProperty(ObjectPath) {
- if (t.isIdentifier(ObjectPath.node.value)) {
- if (ObjectPath.node.value.name === 'undefined') {
- ObjectPath.remove();
+ if (isValidConfig) {
+ const calleeName = callExpressionPath.node.callee.name;
+ if (
+ calleeName === styledAliasImportedName ||
+ calleeName === styledImportName ||
+ calleeName === createComponentsImportedName ||
+ calleeName === createStyleImportedName
+ ) {
+ callExpressionPath.traverse({
+ ObjectProperty(ObjectPath) {
+ if (t.isIdentifier(ObjectPath.node.value)) {
+ if (ObjectPath.node.value.name === 'undefined') {
+ ObjectPath.remove();
+ }
}
- }
- },
- });
+ },
+ });
+ }
+ if (
+ calleeName === styledAliasImportedName ||
+ calleeName === styledImportName
+ ) {
+ let componentName = callExpressionPath?.parent?.id?.name;
+
+ if (componentName) {
+ guessingStyledComponents.push(componentName);
+ }
- if (isValidConfig) {
let args = callExpressionPath.node.arguments;
let componentThemeNode = args[1];
@@ -633,89 +764,16 @@ module.exports = function (b) {
extendedThemeNode.properties.push(tempPropertyResolverNode);
}
- // getExportedConfigFromFileString(ConfigDefault);
- let mergedPropertyConfig = {
- ...ConfigDefault?.propertyTokenMap,
- ...propertyTokenMap,
- };
- let componentExtendedConfig = merge(
- {},
- {
- ...ConfigDefault,
- propertyTokenMap: { ...mergedPropertyConfig },
- },
- ExtendedConfig
+ const resultParamsNode = getBuildTimeParams(
+ theme,
+ componentConfig,
+ ExtendedConfig,
+ outputLibrary,
+ platform,
+ 'boot'
);
- if (theme && Object.keys(theme).length > 0) {
- const verbosedTheme = convertStyledToStyledVerbosed(theme);
-
- let componentHash = stableHash({
- ...theme,
- ...componentConfig,
- ...ExtendedConfig,
- });
-
- if (outputLibrary) {
- componentHash = outputLibrary + '-' + componentHash;
- }
-
- const { styledIds, verbosedStyleIds } =
- updateOrderUnResolvedMap(
- verbosedTheme,
- componentHash,
- 'boot',
- componentConfig,
- BUILD_TIME_GLUESTACK_STYLESHEET,
- platform
- );
-
- const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve(
- styledIds,
- componentExtendedConfig,
- ExtendedConfig
- );
-
- const current_global_map =
- BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();
-
- const orderedResolvedTheme = [];
-
- current_global_map?.forEach((styledResolved) => {
- if (styledIds.includes(styledResolved?.meta?.cssId)) {
- orderedResolvedTheme.push(styledResolved);
- }
- });
-
- let styleIdsAst = generateObjectAst(verbosedStyleIds);
-
- let toBeInjectedAst = generateObjectAst(toBeInjected);
-
- let orderedResolvedAst = generateArrayAst(orderedResolvedTheme);
-
- let orderedStyleIdsArrayAst = t.arrayExpression(
- styledIds?.map((cssId) => t.stringLiteral(cssId))
- );
-
- let resultParamsNode = t.objectExpression([
- t.objectProperty(
- t.stringLiteral('orderedResolved'),
- orderedResolvedAst
- ),
- t.objectProperty(
- t.stringLiteral('toBeInjected'),
- toBeInjectedAst
- ),
- t.objectProperty(
- t.stringLiteral('styledIds'),
- orderedStyleIdsArrayAst
- ),
- t.objectProperty(
- t.stringLiteral('verbosedStyleIds'),
- styleIdsAst
- ),
- ]);
-
+ if (resultParamsNode) {
while (args.length < 4) {
args.push(t.objectExpression([]));
}
@@ -746,6 +804,92 @@ module.exports = function (b) {
// console.log('final', generate(path.node).code);
// console.log('\n >>>>>>>>>>>>>>>>>>>>>\n\n');
}
+ if (calleeName === createStyleImportedName) {
+ let args = callExpressionPath.node.arguments;
+
+ let componentThemeNode = args[0];
+ let componentConfigNode = args[1] ?? t.objectExpression([]);
+
+ if (
+ !(
+ t.isIdentifier(componentThemeNode) ||
+ t.isIdentifier(componentConfigNode)
+ )
+ ) {
+ let theme = getObjectFromAstNode(componentThemeNode);
+ let componentConfig = getObjectFromAstNode(componentConfigNode);
+
+ const resultParamsNode = getBuildTimeParams(
+ theme,
+ componentConfig,
+ {},
+ outputLibrary,
+ platform,
+ 'extended'
+ );
+
+ if (resultParamsNode) {
+ while (args.length < 3) {
+ args.push(t.objectExpression([]));
+ }
+ if (!args[2]) {
+ args.push(resultParamsNode);
+ } else {
+ args[2] = resultParamsNode;
+ }
+ }
+ }
+ }
+ if (calleeName === createComponentsImportedName) {
+ /*
+ extended theme components AST
+ {
+ box: {
+ theme: {},
+ },
+ button: {
+ theme: {},
+ },
+ }
+ */
+ const extendedThemeComponents =
+ callExpressionPath.node.arguments[0].properties;
+ extendedThemeComponents.forEach((property) => {
+ if (
+ !t.isIdentifier(property.value) &&
+ !t.isTemplateLiteral(property.value) &&
+ !t.isConditionalExpression(property.value)
+ ) {
+ const { themeNode, componentConfigNode } =
+ findThemeAndComponentConfig(property.value.properties);
+
+ let theme = themeNode
+ ? getObjectFromAstNode(themeNode?.value)
+ : {};
+ let componentConfig = componentConfigNode
+ ? getObjectFromAstNode(componentConfigNode?.value)
+ : {};
+
+ const resultParamsNode = getBuildTimeParams(
+ theme,
+ componentConfig,
+ {},
+ outputLibrary,
+ platform,
+ 'extended'
+ );
+
+ if (resultParamsNode) {
+ property.value.properties.push(
+ t.objectProperty(
+ t.stringLiteral('BUILD_TIME_PARAMS'),
+ resultParamsNode
+ )
+ );
+ }
+ }
+ });
+ }
}
},
JSXOpeningElement(jsxOpeningElementPath) {
diff --git a/packages/react/README.md b/packages/react/README.md
index 4770baeae..1879d8ca9 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -10,7 +10,7 @@
## Documentation
-You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/styledocs website.
+You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs website.
## Installation
diff --git a/packages/react/package.json b/packages/react/package.json
index fd9c7fe33..f386b944f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@gluestack-style/react",
"description": "A universal & performant styling library for React Native, Next.js & React",
- "version": "0.2.51",
+ "version": "1.0.1",
"keywords": [
"React Native",
"Next.js",
diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx
index 91fd4d689..758a9e652 100644
--- a/packages/react/src/StyledProvider.tsx
+++ b/packages/react/src/StyledProvider.tsx
@@ -9,9 +9,14 @@ import { createGlobalStyles } from './createGlobalStyles';
type Config = any;
let colorModeSet = false;
-export const defaultConfig: { config: Config; colorMode: COLORMODES } = {
+export const defaultConfig: {
+ config: Config;
+ colorMode: COLORMODES;
+ components: any;
+} = {
config: {},
colorMode: 'light',
+ components: {},
};
const defaultContextData: Config = defaultConfig;
@@ -38,7 +43,7 @@ export const StyledProvider: React.FC<{
children?: React.ReactNode;
globalStyles?: any;
}> = ({ config, colorMode, children, globalStyles }) => {
- const currentConfig = React.useMemo(() => {
+ const currentConfig: any = React.useMemo(() => {
//TODO: Add this later
return platformSpecificSpaceUnits(config, Platform.OS);
}, [config]);
@@ -85,12 +90,18 @@ export const StyledProvider: React.FC<{
setCurrentColorMode(currentColorMode);
}
+ const [animationDriverData, setAnimationDriverData] = React.useState();
const globalStyleMap =
config?.globalStyle && createGlobalStyles(config.globalStyle);
const contextValue = React.useMemo(() => {
- return { config: currentConfig, globalStyle: globalStyleMap };
- }, [currentConfig, globalStyleMap]);
+ return {
+ config: currentConfig,
+ globalStyle: globalStyleMap,
+ animationDriverData,
+ setAnimationDriverData,
+ };
+ }, [currentConfig, globalStyleMap, animationDriverData]);
return (
diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts
index 5aad9322b..5df3a0467 100644
--- a/packages/react/src/createConfig.ts
+++ b/packages/react/src/createConfig.ts
@@ -5,13 +5,20 @@ import { resolveStringToken } from './utils';
import { stableHash } from './stableHash';
import { propertyTokenMap } from './propertyTokenMap';
import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
+import { GluestackStyleSheet } from './style-sheet';
+import { resolvePlatformTheme } from './styled';
+import { Platform } from 'react-native';
-var globalPluginStore: any = [];
+/********************* PLUGINS *****************************/
-function setGlobalPluginStore(plugins: Array) {
- globalPluginStore.push(...plugins);
+var globalPluginStore: never[] = [];
+function setGlobalPluginStore(plugins: any) {
+ if (plugins) {
+ // @ts-ignore
+ globalPluginStore.push(...plugins);
+ }
+ return getGlobalPluginStore();
}
-
function getGlobalPluginStore() {
return globalPluginStore;
}
@@ -20,12 +27,40 @@ export function getInstalledPlugins() {
return getGlobalPluginStore();
}
+/********************* CREATE COMPONENTS *****************************/
+
+var globalComponentsStore: any = {};
+
+// function setGlobalComponentsStore(components: any) {
+// if (components) {
+// // @ts-ignore
+// globalComponentsStore = {
+// ...globalComponentsStore,
+// ...components,
+// };
+// }
+// return getGlobalComponentsStore();
+// }
+
+function getGlobalComponentsStore() {
+ return globalComponentsStore;
+}
+
+export function getInstalledComponents() {
+ return getGlobalComponentsStore();
+}
+
+export const createComponents = (components: T): T => {
+ return components;
+};
+
export const createConfig = <
T extends GlueStackConfig<
//@ts-ignore
T['tokens'],
T['aliases'],
- T['globalStyle']
+ T['globalStyle'],
+ T['plugins']
>
>(
config:
@@ -34,32 +69,27 @@ export const createConfig = <
//@ts-ignore
T['tokens'],
T['aliases'],
- T['globalStyle']
+ T['globalStyle'],
+ T['plugins']
>
): T => {
if (config.plugins) {
- setGlobalPluginStore(config.plugins);
+ config.plugins = setGlobalPluginStore(config.plugins);
}
- delete config.plugins;
+ // delete config.plugins;
- if (
- !config.components &&
- // @ts-ignore
- !config.themes
- ) {
+ if (!config.themes) {
return config as any;
}
- let newConfig = config;
- if (config.components) {
- newConfig = resolveComponentThemes(config);
- }
+ // if (config.components) {
+ // newConfig = resolveComponentThemes(config);
+ // }
- // @ts-ignore
if (config.themes) {
- const newConfigWithThemesResolved = resolveThemes(newConfig);
+ const newConfigWithThemesResolved = resolveThemes(config);
return newConfigWithThemesResolved as any;
}
- return newConfig as any;
+ return config as any;
};
const resolveThemes = (config: any) => {
@@ -86,36 +116,68 @@ const resolveThemes = (config: any) => {
return newConfig;
};
-const resolveComponentThemes = (config: any) => {
- const newConfig = { ...config };
- delete config.components;
+export const resolveComponentTheme = (config: any, componentTheme: any) => {
+ const configWithPropertyTokenMap = config;
+
+ let resolvedTheme = componentTheme;
+ const component = componentTheme;
+
+ if (
+ Object.keys(component?.BUILD_TIME_PARAMS ?? {}).length === 0 &&
+ component.theme
+ ) {
+ resolvedTheme = resolveTheme(
+ component.theme,
+ configWithPropertyTokenMap,
+ component?.componentConfig
+ );
+ } else {
+ GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved);
+ resolvedTheme = component;
+ }
+ return resolvedTheme;
+};
+
+export const resolveComponentThemes = (config: any, components: any) => {
+ let newComponents: any = {};
const configWithPropertyTokenMap = {
...config,
propertyTokenMap,
};
- Object.keys(newConfig?.components ?? {}).forEach((componentName: any) => {
- const component = newConfig.components[componentName];
- if (component.theme) {
- component.theme = resolveTheme(
+
+ Object.keys(components ?? {}).forEach((componentName: any) => {
+ const component = components[componentName];
+
+ if (
+ Object.keys(component?.BUILD_TIME_PARAMS ?? {}).length === 0 &&
+ component.theme
+ ) {
+ newComponents[componentName] = resolveTheme(
component.theme,
configWithPropertyTokenMap,
component?.componentConfig
);
+ } else {
+ GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved);
+ newComponents[componentName] = component;
}
});
- return newConfig;
+ return newComponents;
};
-const resolveTheme = (
+export const resolveTheme = (
componentTheme: {},
_config: any,
extendedConfig?: any
) => {
const versboseComponentTheme = convertStyledToStyledVerbosed(componentTheme);
+
+ resolvePlatformTheme(versboseComponentTheme, Platform.OS);
+
const componentHash = stableHash({
- ...componentTheme,
+ ...versboseComponentTheme,
});
const { styledIds, verbosedStyleIds } = updateOrderUnResolvedMap(
@@ -124,9 +186,10 @@ const resolveTheme = (
'extended',
extendedConfig
);
+
return {
- extendedStyleIds: styledIds,
- extendedVerbosedStyleIds: verbosedStyleIds,
+ styledIds,
+ verbosedStyleIds,
theme: versboseComponentTheme,
};
};
diff --git a/packages/react/src/createStyle.ts b/packages/react/src/createStyle.ts
new file mode 100644
index 000000000..8db8b45b3
--- /dev/null
+++ b/packages/react/src/createStyle.ts
@@ -0,0 +1,25 @@
+import type { ViewProps, ImageProps, TextProps } from 'react-native';
+import type {
+ IComponentStyleConfig,
+ ITheme,
+ UnionToIntersection,
+} from './types';
+
+export const createStyle = (
+ theme: T | ITheme,
+ componentConfig?: Omit,
+ BUILD_TIME_PARAMS?: any
+) => {
+ const createdStyles = {
+ theme,
+ componentConfig,
+ BUILD_TIME_PARAMS,
+ };
+
+ return createdStyles as {
+ theme: UnionToIntersection<
+ T | ITheme
+ >;
+ componentConfig?: Omit;
+ };
+};
diff --git a/packages/react/src/createStyled.ts b/packages/react/src/createStyled.ts
index 7015d82b0..0dcd72cd3 100644
--- a/packages/react/src/createStyled.ts
+++ b/packages/react/src/createStyled.ts
@@ -1,19 +1,6 @@
import { styled } from './styled';
import type { IComponentStyleConfig, ITheme } from './types';
-export interface IStyledPlugin {
- styledUtils?: IStyled;
- register(styledUtils: IStyled): void;
- inputMiddleWare(styledObj: any): void;
- componentMiddleWare?(props: any): void;
-}
-
-export class IStyled {
- aliases?: any;
- tokens?: any;
- ref?: any;
-}
-
export const createStyled = (plugins: any) => {
let styledComponent = (
Component: React.ComponentType,
diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts
index 35eeaed09..72cdc4c2a 100644
--- a/packages/react/src/generateStylePropsFromCSSIds.ts
+++ b/packages/react/src/generateStylePropsFromCSSIds.ts
@@ -90,11 +90,7 @@ export function isValidBreakpoint(
if (queryWidth.length > 0) {
if (queryWidth.length === 1) {
- if (
- queryWidth[0] !== null &&
- // @ts-ignore
- queryWidth[0] <= currentBreakpointValue
- ) {
+ if (queryWidth[0] !== null && queryWidth[0] <= currentBreakpointValue) {
return true;
}
} else {
@@ -137,7 +133,6 @@ export function generateStylePropsFromCSSIds(
config: any,
activeTheme: any
) {
- // console.setStartTimeStamp('generateStylePropsFromCSSIds');
const propsStyles = Array.isArray(props?.style)
? props?.style
: [props?.style];
@@ -174,30 +169,14 @@ export function generateStylePropsFromCSSIds(
}
}
- // console.setEndTimeStamp('generateStylePropsFromCSSIds');
- // return props;
- // Object.assign(props., {
- // dataSet:
- // style: getDataStyle(props, styleCSSIdsString),
- // });
-
Object.assign(props, {
- 'data-style': getDataStyle(props, styleCSSIdsString),
'style': propsStyles ? [...styleObj, ...propsStyles] : styleObj,
'dataSet': {
...props?.dataSet,
style: getDataStyle(props, styleCSSIdsString),
},
+ // DONOT REMOVE THIS LINE, THIS IS FOR SPECIFIC COMPONENTS LIKE next/link
+ 'data-style': getDataStyle(props, styleCSSIdsString),
});
return props;
- // return {
- // ...props,
- // 'dataSet': {
- // ...props.dataSet,
- // // TODO: this below line causes recalculate style on web
- // style: getDataStyle(props, styleCSSIdsString),
- // },
- // 'data-style': getDataStyle(props, styleCSSIdsString),
- // 'style': propsStyles ? [...styleObj, ...propsStyles] : styleObj,
- // };
}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 38246bd3e..4359ef50f 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -70,19 +70,31 @@ export type {
Aliases,
AliasesProps,
ICustomConfig,
+ ICustomComponents,
+ IStyledPlugin,
+ IStyled,
+ IAnimationDriverPlugin,
GSConfig,
+ IAnimationResolver,
} from './types';
export { createStyled } from './createStyled';
-export type { IStyledPlugin, IStyled } from './createStyled';
+
export { createGlobalStylesWeb } from './createGlobalStylesWeb';
// export { styled };
// export { flush } from './utils/css-injector';
-
+export { propertyTokenMap } from './propertyTokenMap';
export { AsForwarder } from './AsForwarder';
-export { AddCssTokenVariables, FontResolver } from './plugins';
+export * from './plugins';
+
+export { createStyle } from './createStyle';
export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved';
-export { createConfig } from './createConfig';
+export {
+ createConfig,
+ getInstalledPlugins,
+ createComponents,
+ getInstalledComponents,
+} from './createConfig';
export * from './core';
export * from './hooks';
diff --git a/packages/react/src/plugins/css-variables.tsx b/packages/react/src/plugins/css-variables.tsx
index b3a02520f..a10d5a012 100644
--- a/packages/react/src/plugins/css-variables.tsx
+++ b/packages/react/src/plugins/css-variables.tsx
@@ -1,4 +1,4 @@
-import type { IStyled, IStyledPlugin } from '../createStyled';
+import type { IStyled, IStyledPlugin } from '../types';
import { deepMerge } from '../utils';
import { injectGlobalCss } from '../utils/css-injector';
import React, { useMemo } from 'react';
diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx
index 8ded2b16a..8b5b19a65 100644
--- a/packages/react/src/plugins/font-resolver.tsx
+++ b/packages/react/src/plugins/font-resolver.tsx
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
-import type { IStyled, IStyledPlugin } from '../createStyled';
+import type { IStyled, IStyledPlugin } from '../types';
import { useStyled } from '../StyledProvider';
import { propertyTokenMap } from '../propertyTokenMap';
import { deepMerge, deepMergeObjects, setObjectKeyValue } from '../utils';
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
index 889bd33c5..301b16911 100644
--- a/packages/react/src/styled.tsx
+++ b/packages/react/src/styled.tsx
@@ -10,6 +10,7 @@ import type {
ITheme,
ExtendedConfigType,
IComponentStyleConfig,
+ StyledConfig,
} from './types';
import {
deepMerge,
@@ -43,7 +44,7 @@ import { stableHash } from './stableHash';
import { DeclarationType, GluestackStyleSheet } from './style-sheet';
import { CSSPropertiesMap } from './core/styled-system';
import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
-import { getInstalledPlugins } from './createConfig';
+import { resolveComponentTheme } from './createConfig';
const styledSystemProps = { ...CSSPropertiesMap };
@@ -666,7 +667,7 @@ function mergeArraysInObjects(...objects: any) {
return merged;
}
-function resolvePlatformTheme(theme: any, platform: any) {
+export function resolvePlatformTheme(theme: any, platform: any) {
if (typeof theme === 'object') {
Object.keys(theme).forEach((themeKey) => {
if (themeKey !== 'style' && themeKey !== 'defaultProps') {
@@ -838,7 +839,7 @@ export function verboseStyled(
styledIds: Array;
}
) {
- const componentName = componentStyleConfig?.componentName;
+ // const componentName = componentStyleConfig?.componentName;
const componentHash = stableHash({
...theme,
...componentStyleConfig,
@@ -860,6 +861,7 @@ export function verboseStyled(
//@ts-ignore
type ITypeReactNativeStyles = P['style'];
let styleHashCreated = false;
+ let pluginData: any;
let orderedResolved: OrderedSXResolved;
let componentStyleIds: any = {};
let componentDescendantStyleIds: any = {}; // StyleIds = {};
@@ -973,12 +975,13 @@ export function verboseStyled(
let CONFIG: any = {};
let isInjected = false;
+ let plugins: any = [];
const containsDescendant =
componentStyleConfig?.descendantStyle &&
componentStyleConfig?.descendantStyle?.length > 0;
- const NewComp = (
+ const StyledComponent = (
{
children,
//@ts-ignore
@@ -990,12 +993,15 @@ export function verboseStyled(
// styledIds: BUILD_TIME_STYLE_IDS = [],
// sxHash: BUILD_TIME_sxHash = '',
...componentProps
- }: Omit &
- Partial> &
- Partial> & {
- as?: any;
- children?: any;
- },
+ }: Omit<
+ Omit &
+ Partial> &
+ Partial> & {
+ as?: any;
+ children?: any;
+ },
+ 'animationComponentGluestack'
+ >,
ref: React.ForwardedRef
) => {
const isClient = React.useRef(false);
@@ -1031,33 +1037,76 @@ export function verboseStyled(
...styledContext.config,
propertyTokenMap,
};
+ // for extended components
const EXTENDED_THEME =
- componentName && CONFIG?.components?.[componentName]?.theme?.theme;
+ componentStyleConfig.componentName &&
+ CONFIG?.components?.[componentStyleConfig.componentName];
+
+ // middleware logic
// Injecting style
if (EXTENDED_THEME) {
- theme.variants = deepMerge(theme.variants, EXTENDED_THEME.variants);
- theme.defaultProps = deepMerge(
- theme.defaultProps,
- EXTENDED_THEME.props
+ // RUN Middlewares
+
+ const resolvedComponentExtendedTheme = resolveComponentTheme(
+ CONFIG,
+ EXTENDED_THEME
);
+
+ // const resolvedComponentExtendedTheme = EXTENDED_THEME;
+
+ theme = deepMerge(theme, resolvedComponentExtendedTheme.theme);
+
// @ts-ignore
- theme.props = deepMerge(theme.props, EXTENDED_THEME.props);
+ Object.assign(themeDefaultProps, theme?.baseStyle?.props);
+ if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) {
+ const EXTENDED_THEME_BUILD_TIME_PARAMS =
+ EXTENDED_THEME?.BUILD_TIME_PARAMS;
+ deepMergeArray(
+ styleIds,
+ EXTENDED_THEME_BUILD_TIME_PARAMS?.verbosedStyleIds
+ );
+ GluestackStyleSheet.inject(
+ EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected
+ );
+ } else {
+ // Merge of Extended Config Style ID's with Component Style ID's
+ deepMergeArray(
+ styleIds,
+ resolvedComponentExtendedTheme?.verbosedStyleIds
+ );
- // Merge of Extended Config Style ID's with Component Style ID's
- deepMergeArray(
- styleIds,
- CONFIG?.components?.[`${componentName}`]?.theme
- ?.extendedVerbosedStyleIds
- );
- // Injecting Extended StyleSheet from Config
- orderedCSSIds = [
- ...orderedCSSIds,
- ...CONFIG?.components?.[`${componentName}`]?.theme?.extendedStyleIds,
- ];
+ const extendedStylesToBeInjected = GluestackStyleSheet.resolve(
+ resolvedComponentExtendedTheme?.styledIds,
+ CONFIG,
+ componentExtendedConfig
+ );
+ GluestackStyleSheet.inject(extendedStylesToBeInjected);
+ }
+ }
+
+ if (CONFIG.plugins) {
+ plugins.push(...CONFIG.plugins);
+ }
+ if (ExtendedConfig?.plugins) {
+ plugins.push(...ExtendedConfig?.plugins);
+ }
+
+ if (plugins) {
+ for (const pluginName in plugins) {
+ // @ts-ignore
+ [theme, , , Component] = plugins[pluginName]?.inputMiddleWare(
+ theme,
+ true,
+ true,
+ Component
+ );
+ }
}
+ // for extended components end
+
//@ts-ignore
const globalStyle = styledContext.globalStyle;
@@ -1835,7 +1884,30 @@ export function verboseStyled(
delete resolvedStyleProps?.as;
+ // }
+
+ if (plugins) {
+ // plugins?.reverse();
+ plugins.reverse();
+ for (const pluginName in plugins) {
+ // @ts-ignore
+ if (plugins[pluginName]?.componentMiddleWare) {
+ // @ts-ignore
+ Component = plugins[pluginName]?.componentMiddleWare({
+ Component: Component,
+ theme,
+ componentStyleConfig,
+ ExtendedConfig,
+ });
+
+ //@ts-ignore
+ pluginData = Component.styled;
+ }
+ }
+ }
+
let component;
+
if (AsComp) {
//@ts-ignore
if (Component.isStyledComponent) {
@@ -1871,12 +1943,14 @@ export function verboseStyled(
);
}
- // }
return component;
};
- const StyledComp = React.forwardRef(NewComp);
+ const StyledComp = React.forwardRef(StyledComponent);
+
+ //@ts-ignore
+ StyledComp.getStyledData = () => pluginData;
const displayName = componentStyleConfig?.componentName
? componentStyleConfig?.componentName
@@ -1889,14 +1963,14 @@ export function verboseStyled(
//@ts-ignore
StyledComp.isStyledComponent = true;
- return StyledComp;
+ return StyledComp as typeof StyledComp & { styledConfig?: StyledConfig };
}
-export function styled(
+export function styled(
Component: React.ComponentType,
theme: ITheme,
componentStyleConfig?: IComponentStyleConfig,
- ExtendedConfig?: ExtendedConfigType,
+ ExtendedConfig?: ExtendedConfigType,
BUILD_TIME_PARAMS?: {
orderedResolved: OrderedSXResolved;
verbosedStyleIds: {
@@ -1911,19 +1985,46 @@ export function styled(
// const DEBUG =
// process.env.NODE_ENV === 'development' && DEBUG_TAG ? false : false;
- let styledObj = theme;
- // @ts-ignore
- let plugins: PluginType = [...getInstalledPlugins()];
- if (ExtendedConfig?.plugins) {
- // @ts-ignore
- plugins = [...plugins, ...ExtendedConfig?.plugins];
+ // const componentName = componentStyleConfig?.componentName;
+ // const componentExtendedTheme = extendedThemeConfig?.theme;
+ // const componentExtended_build_time_params =
+ // extendedThemeConfig?.BUILD_TIME_PARAMS;
+ // let mergedBuildTimeParams: any;
+
+ if (BUILD_TIME_PARAMS) {
+ // mergedBuildTimeParams = deepMergeArray(
+ // { ...BUILD_TIME_PARAMS },
+ // { ...componentExtended_build_time_params }
+ // );
}
- for (const pluginName in plugins) {
- // @ts-ignore
- styledObj = plugins[pluginName]?.inputMiddleWare(styledObj, true, true);
- }
- theme = styledObj;
+ // let styledObj = { ...theme };
+ // if (componentExtendedTheme) {
+ // styledObj = deepMerge({ ...theme }, { ...componentExtendedTheme });
+ // }
+
+ // // move inside stylehash created
+ // let plugins = [...getInstalledPlugins()];
+
+ // if (ExtendedConfig?.plugins) {
+ // // @ts-ignore
+ // plugins = [...plugins, ...ExtendedConfig?.plugins];
+ // }
+
+ // for (const pluginName in plugins) {
+ // // @ts-ignore
+ // [styledObj, , , Component] = plugins[pluginName]?.inputMiddleWare
(
+ // styledObj,
+ // true,
+ // true,
+ // Component
+ // );
+ // }
+
+ // theme = styledObj;
+
+ // move inside stylehash created
+
const sxConvertedObject = convertStyledToStyledVerbosed(theme);
let StyledComponent = verboseStyled(
@@ -1933,36 +2034,43 @@ 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,
- componentStyleConfig,
- ExtendedConfig,
- });
- }
- }
+ StyledComponent.isAnimatedComponent = Component.isAnimatedComponent;
- for (const pluginName in plugins) {
- const compWrapper =
- // @ts-ignore
- typeof plugins[pluginName].wrapperComponentMiddleWare === 'function'
- ? // @ts-ignore
- plugins[pluginName].wrapperComponentMiddleWare()
- : null;
+ // move before returning component from verboseStyled
- if (compWrapper) {
- for (const key of Object.keys(compWrapper)) {
- // @ts-ignore
- StyledComponent[key] = compWrapper[key];
- }
- }
- }
+ // @ts-ignore
+ // plugins?.reverse();
+ // for (const pluginName in plugins) {
+ // // @ts-ignore
+ // if (plugins[pluginName]?.componentMiddleWare) {
+ // // @ts-ignore
+ // StyledComponent = plugins[pluginName]?.componentMiddleWare({
+ // Component: StyledComponent,
+ // theme,
+ // componentStyleConfig,
+ // ExtendedConfig,
+ // });
+ // }
+ // }
+ // move before returning component from verboseStyled
+
+ // for (const pluginName in plugins) {
+ // const compWrapper =
+ // // @ts-ignore
+ // typeof plugins[pluginName].wrapperComponentMiddleWare === 'function'
+ // ? // @ts-ignore
+ // plugins[pluginName].wrapperComponentMiddleWare()
+ // : null;
+
+ // if (compWrapper) {
+ // for (const key of Object.keys(compWrapper)) {
+ // // @ts-ignore
+ // StyledComponent[key] = compWrapper[key];
+ // }
+ // }
+ // }
return StyledComponent;
}
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 72a55e834..47301963f 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -33,6 +33,29 @@ export type COLORMODES = 'dark' | 'light';
/*************************** CORE TYPES *************************************************/
+export interface IStyledPlugin {
+ config?: IStyled;
+ register(styledUtils: IStyled): void;
+ inputMiddleWare(styledObj: any): void;
+ componentMiddleWare?(props: any): void;
+}
+export interface IAnimationDriverPlugin {
+ config?: IStyled;
+ register(styledUtils: IStyled): void;
+ engine: any;
+}
+
+export class IAnimationResolver {
+ aliases?: any;
+ tokens?: any;
+ ref?: any;
+}
+export class IStyled {
+ aliases?: any;
+ tokens?: any;
+ ref?: any;
+}
+
export interface Tokens {
colors?: { [key: GenericKey]: Record & {} };
sizes?: { [key: GenericKey]: Record & {} };
@@ -53,6 +76,7 @@ export type AliasesType = {
[key: string]: keyof RNStyledProps;
};
+export type GlobalPluginType = unknown;
export type GenericAliases = {};
export type GenericGlobalStyle = {
// variants: {};
@@ -78,19 +102,14 @@ export type ThemeStyles = Partial<{
export type GlueStackConfig<
IToken extends Tokens,
IGlobalAliases,
- IGlobalStyle
+ IGlobalStyle,
+ PluginType = []
> = {
tokens: IToken;
aliases: IGlobalAliases;
globalStyle?: GlobalStyles;
- plugins?: Array;
+ plugins?: PluginType;
themes?: ThemeStyles;
- components?: {
- [key: string]: {
- theme: Partial>;
- componentConfig?: IComponentStyleConfig;
- };
- };
};
export type ComponentsThemeType = {
@@ -102,12 +121,20 @@ export type ComponentsThemeType = {
export type InferConfig = Conf extends GlueStackConfig<
infer A,
infer C,
- infer D
+ infer D,
+ infer B
>
- ? GlueStackConfig
+ ? GlueStackConfig
: any;
export type CreateGenericConfig = GlueStackConfig<
+ Tokens,
+ GenericAliases,
+ GenericGlobalStyle,
+ GlobalPluginType
+>;
+
+export type CreateGenericComponents = GlueStackConfig<
Tokens,
GenericAliases,
GenericGlobalStyle
@@ -115,22 +142,32 @@ export type CreateGenericConfig = GlueStackConfig<
// All Aliases
export type Aliases = GSConfig['aliases'];
+export type Plugins = GSConfig['plugins'];
export type Components = GSConfig['components'];
export type IMediaQueries = keyof GSConfig['tokens']['mediaQueries'];
export type SxStyleProps<
GenericComponentStyles,
Variants,
- GenericComponentProps
+ GenericComponentProps,
+ PluginType
> = {
sx?: Partial<
- SxProps & {
+ SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ '',
+ '',
+ PluginType
+ > & {
[Key in `@${IMediaQueries}`]?: SxProps<
GenericComponentStyles,
Variants,
GenericComponentProps,
'',
- Key
+ Key,
+ PluginType
>;
}
>;
@@ -139,14 +176,12 @@ export type SxStyleProps<
//@ts-ignore
type GlobalVariants = GSConfig['globalStyle']['variants'];
-export type IComponentStyleConfig = Partial<
- {
- descendantStyle: any;
- ancestorStyle: any;
- resolveProps: any;
- componentName: ComCon;
- } & { [key: string]: any }
->;
+export type IComponentStyleConfig = Partial<{
+ descendantStyle: any;
+ ancestorStyle: any;
+ resolveProps: any;
+ componentName: ComCon;
+}>;
export type Config = {
alias: { [K: string]: any };
@@ -164,10 +199,10 @@ type PropsResolveType = {
props?: Partial;
};
type PropertyResolverType = PropsResolveType & ResolverType;
-export type ExtendedConfigType = {
+export type ExtendedConfigType = {
propertyTokenMap?: PropertyTokenMapType;
propertyResolver?: PropertyResolverType;
- plugins?: T;
+ plugins?: Array;
};
/*********************** GLOBAL STYLE TYPES ****************************************/
@@ -263,33 +298,45 @@ export type GlobalStyles = GlobalVariantSx<
/*********************** USER THEME / SX TYPES ****************************************/
export type ITheme = Partial<
- //@ts-ignore
- StyledThemeProps
+ StyledThemeProps<
+ Variants,
+ 'style' extends keyof P ? P['style'] : {},
+ P,
+ 'animationComponentGluestack' extends keyof P
+ ? P['animationComponentGluestack'] extends true
+ ? Plugins
+ : []
+ : []
+ >
>;
export type StyledThemeProps<
Variants,
GenericComponentStyles,
- GenericComponentProps
+ GenericComponentProps,
+ PluginTypes
> = SxProps<
GenericComponentStyles,
Variants & GlobalVariants,
GenericComponentProps,
'',
- ''
+ '',
+ PluginTypes
> & {
[Key in `@${IMediaQueries}`]: SxProps<
GenericComponentStyles,
Variants,
GenericComponentProps,
'',
- Key
+ Key,
+ PluginTypes
>;
} & {
variants: VariantType<
Variants,
GenericComponentStyles,
- GenericComponentProps
+ GenericComponentProps,
+ PluginTypes
>;
// sizes?: SizeTypeNew;
compoundVariants?: Array<
@@ -297,10 +344,20 @@ export type StyledThemeProps<
>;
defaultProps?: {
[Key in keyof MergeNested<
- VariantType,
+ VariantType<
+ Variants,
+ GenericComponentStyles,
+ GenericComponentProps,
+ PluginTypes
+ >,
GlobalVariants
>]?: keyof MergeNested<
- VariantType,
+ VariantType<
+ Variants,
+ GenericComponentStyles,
+ GenericComponentProps,
+ PluginTypes
+ >,
GlobalVariants
>[Key];
} & { [key: string]: any };
@@ -315,7 +372,8 @@ type PassingPropsType<
GenericComponentStyles,
Variants,
GenericComponentProps,
- MediaQuery
+ MediaQuery,
+ PluginType
> = MediaQuery extends ''
? {
props?: Partial<
@@ -328,7 +386,8 @@ type PassingPropsType<
VariantType<
Variants,
GenericComponentStyles,
- GenericComponentProps
+ GenericComponentProps,
+ PluginType
>,
GlobalVariants
>]?:
@@ -336,7 +395,8 @@ type PassingPropsType<
VariantType<
Variants,
GenericComponentStyles,
- GenericComponentProps
+ GenericComponentProps,
+ PluginType
>,
GlobalVariants
>[Key];
@@ -345,13 +405,22 @@ type PassingPropsType<
}
: {};
-// PluginPropsType<
-// PluginType,
-// GenericComponentProps,
-// GenericComponentStyles,
-// PLATFORM
-// >
-
+type AnimatedPropsType = {
+ opacity: number | string;
+ x: number | string | {};
+ y: number | string | {};
+ scale: any;
+ scaleX: any;
+ scaleY: any;
+ skewX: any;
+ skewY: any;
+ perspective: any;
+ rotate: number;
+ rotateY: number;
+ rotateZ: number;
+ matrix: any;
+};
+// componentDriver
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type PluginPropsType<
PluginType,
@@ -362,26 +431,9 @@ type PluginPropsType<
[key in keyof UnionToIntersection<
// @ts-ignore
ReturnType
- >]: Partial<
- UnionToIntersection<
- // @ts-ignore
- ReturnType
- >[key] extends keyof GenericComponentProps
- ? StylePropsType &
- GenericComponentProps[UnionToIntersection<
- // @ts-ignore
- ReturnType
- >[key]]
- : UnionToIntersection<
- // @ts-ignore
- ReturnType
- >[key] extends keyof GenericComponentStyles
- ? GenericComponentStyles[UnionToIntersection<
- // @ts-ignore
- ReturnType
- >[key]]
- : any
- >;
+ >]: Partial &
+ Partial> &
+ Partial;
};
export type SxProps<
@@ -389,82 +441,108 @@ export type SxProps<
Variants = unknown,
GenericComponentProps = unknown,
PLATFORM = '',
- MediaQuery = ''
-> = Partial<
- StylePropsType &
- PassingPropsType<
- GenericComponentStyles,
- Variants,
- GenericComponentProps,
- MediaQuery
+ MediaQuery = '',
+ PluginType = []
+> =
+ | Partial<
+ StylePropsType &
+ PassingPropsType<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ MediaQuery,
+ PluginType
+ >
>
-> & {
- [Key in `_${COLORMODES}`]?: SxProps<
- GenericComponentStyles,
- Variants,
- GenericComponentProps,
- PLATFORM,
- MediaQuery
- >;
-} & {
- [Key in `:${IState}`]?: SxProps<
- GenericComponentStyles,
- Variants,
- GenericComponentProps,
- PLATFORM,
- MediaQuery
- >;
-} & {
- [Key in `_${PLATFORMS}`]?: SxProps<
- GenericComponentStyles,
- Variants,
- GenericComponentProps,
- Key,
- MediaQuery
- > &
- PassingPropsType<
- GenericComponentStyles,
- Variants,
- GenericComponentProps,
- MediaQuery
- > &
- Partial<{
- [key: string]: any;
- }>;
-} & {
- [Key in `_${string}`]?: SxProps<
- RNStyledProps,
- {},
- GenericComponentProps,
- PLATFORM,
- MediaQuery
- > &
- PassingPropsType<
- GenericComponentStyles,
- {},
- GenericComponentProps,
- MediaQuery
- > &
- Partial<{
- [key: string]: any;
- }>;
-};
+ | (Partial<
+ PluginPropsType<
+ PluginType,
+ GenericComponentProps,
+ GenericComponentStyles,
+ PLATFORM
+ >
+ > & {
+ [Key in `_${COLORMODES}`]?: SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ PLATFORM,
+ MediaQuery,
+ PluginType
+ >;
+ } & {
+ [Key in `:${IState}`]?: SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ PLATFORM,
+ MediaQuery,
+ PluginType
+ >;
+ } & {
+ [Key in `_${PLATFORMS}`]?: SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ Key,
+ MediaQuery,
+ PluginType
+ > &
+ PassingPropsType<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ MediaQuery,
+ PluginType
+ > &
+ Partial<{
+ [key: string]: any;
+ }>;
+ } & {
+ [Key in `_${string}`]?: SxProps<
+ RNStyledProps,
+ {},
+ GenericComponentProps,
+ PLATFORM,
+ MediaQuery,
+ PluginType
+ > &
+ PassingPropsType<
+ GenericComponentStyles,
+ {},
+ GenericComponentProps,
+ MediaQuery,
+ PluginType
+ > &
+ Partial<{
+ [key: string]: any;
+ }>;
+ });
export type VariantType<
Variants,
GenericComponentStyles,
- GenericComponentProps
+ GenericComponentProps,
+ PluginTypes
> =
| {
[Key1 in keyof Variants]: {
[Key in keyof Variants[Key1]]: Partial<
- SxProps & {
+ SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ '',
+ '',
+ PluginTypes
+ > & {
[K in `@${IMediaQueries}`]?: SxProps<
GenericComponentStyles,
Variants,
GenericComponentProps,
'',
- K
+ K,
+ PluginTypes
>;
}
>;
@@ -650,14 +728,32 @@ export type StyleIds = {
export interface ICustomConfig {}
+export interface ICustomComponents {}
+
export interface GSConfig
extends Omit,
- ICustomConfig {}
+ ICustomConfig,
+ GenericComponents {
+ components: ICustomComponents;
+}
+
+interface GenericComponents {
+ components: {};
+}
/********************* COMPONENT PROPS TYPE *****************************************/
export type ComponentProps =
- SxStyleProps & {
+ SxStyleProps<
+ GenericComponentStyles,
+ Variants,
+ P,
+ 'animationComponentGluestack' extends keyof P
+ ? P['animationComponentGluestack'] extends true
+ ? Plugins
+ : []
+ : []
+ > & {
states?: {
[K in IState]?: boolean;
};
@@ -760,9 +856,9 @@ export type RNStyles = TokenizedRNStyleProps<
>
>;
-type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (
- k: infer I
-) => void
+export type UnionToIntersection = (
+ U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
? I
: never;
@@ -848,3 +944,20 @@ export type GlobalStyleMap = Map<
}>;
}>
>;
+
+export type ExtendedTheme = ITheme<
+ Variants,
+ ViewProps | ImageProps | TextProps
+>;
+
+// export type CreateStyle = {
+// theme: Component &
+// ITheme;
+// componentConfig?: Omit;
+// };
+
+export type CreateComponents = {
+ [key in keyof T]: T[key];
+};
+
+export type StyledConfig = any;
diff --git a/packages/react/src/updateOrderUnResolvedMap.ts b/packages/react/src/updateOrderUnResolvedMap.ts
index 97ccfbb9d..d271f8dfe 100644
--- a/packages/react/src/updateOrderUnResolvedMap.ts
+++ b/packages/react/src/updateOrderUnResolvedMap.ts
@@ -21,7 +21,10 @@ export function updateOrderUnResolvedMap(
platform: string = ''
) {
const prefixClassName = declarationType === 'inline' ? 'gs' : '';
- const shouldGuessDescendants = declarationType === 'inline' ? true : false;
+ const shouldGuessDescendants =
+ declarationType === 'inline' || declarationType === 'extended'
+ ? true
+ : false;
const unresolvedTheme = styledToStyledResolved(theme, [], {}, false);
const orderedUnResolvedTheme =
styledResolvedToOrderedSXResolved(unresolvedTheme);
diff --git a/tsconfig.json b/tsconfig.json
index ff3872542..df72c6d12 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,6 @@
"allowUnreachableCode": false,
"allowUnusedLabels": true,
"esModuleInterop": true,
- "importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext", "dom"],
diff --git a/yarn.lock b/yarn.lock
index f186a0857..5a435166e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -187,6 +187,21 @@
"@babel/helper-split-export-declaration" "^7.22.6"
semver "^6.3.1"
+"@babel/helper-create-class-features-plugin@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
+ integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.22.5"
+ "@babel/helper-environment-visitor" "^7.22.5"
+ "@babel/helper-function-name" "^7.22.5"
+ "@babel/helper-member-expression-to-functions" "^7.22.15"
+ "@babel/helper-optimise-call-expression" "^7.22.5"
+ "@babel/helper-replace-supers" "^7.22.9"
+ "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+ "@babel/helper-split-export-declaration" "^7.22.6"
+ semver "^6.3.1"
+
"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5":
version "7.22.9"
resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz#9d8e61a8d9366fe66198f57c40565663de0825f6"
@@ -226,6 +241,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+"@babel/helper-environment-visitor@^7.22.20":
+ version "7.22.20"
+ resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+ integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
"@babel/helper-function-name@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
@@ -241,6 +261,13 @@
dependencies:
"@babel/types" "^7.22.5"
+"@babel/helper-member-expression-to-functions@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.15.tgz#b95a144896f6d491ca7863576f820f3628818621"
+ integrity sha512-qLNsZbgrNh0fDQBCPocSL8guki1hcPvltGDv/NxvUoABwFq7GkKSu1nRXeJkVZc+wJvne2E0RKQz+2SQrz6eAA==
+ dependencies:
+ "@babel/types" "^7.22.15"
+
"@babel/helper-member-expression-to-functions@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz#0a7c56117cad3372fbf8d2fb4bf8f8d64a1e76b2"
@@ -255,6 +282,13 @@
dependencies:
"@babel/types" "^7.22.5"
+"@babel/helper-module-imports@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+ integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+ dependencies:
+ "@babel/types" "^7.22.15"
+
"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9", "@babel/helper-module-transforms@^7.9.0":
version "7.22.9"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz#92dfcb1fbbb2bc62529024f72d942a8c97142129"
@@ -266,6 +300,17 @@
"@babel/helper-split-export-declaration" "^7.22.6"
"@babel/helper-validator-identifier" "^7.22.5"
+"@babel/helper-module-transforms@^7.22.15":
+ version "7.22.20"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.20.tgz#da9edc14794babbe7386df438f3768067132f59e"
+ integrity sha512-dLT7JVWIUUxKOs1UnJUBR3S70YK+pKX6AbJgB2vMIvEkZkrfJDbYDJesnPshtKV4LhDOR3Oc5YULeDizRek+5A==
+ dependencies:
+ "@babel/helper-environment-visitor" "^7.22.20"
+ "@babel/helper-module-imports" "^7.22.15"
+ "@babel/helper-simple-access" "^7.22.5"
+ "@babel/helper-split-export-declaration" "^7.22.6"
+ "@babel/helper-validator-identifier" "^7.22.20"
+
"@babel/helper-optimise-call-expression@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
@@ -327,11 +372,21 @@
resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+"@babel/helper-validator-identifier@^7.22.19", "@babel/helper-validator-identifier@^7.22.20":
+ version "7.22.20"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+ integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
"@babel/helper-validator-identifier@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+"@babel/helper-validator-option@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
+ integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
+
"@babel/helper-validator-option@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
@@ -879,6 +934,15 @@
"@babel/helper-plugin-utils" "^7.22.5"
"@babel/helper-simple-access" "^7.22.5"
+"@babel/plugin-transform-modules-commonjs@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.15.tgz#b11810117ed4ee7691b29bd29fd9f3f98276034f"
+ integrity sha512-jWL4eh90w0HQOTKP2MoXXUpVxilxsB2Vl4ji69rSjS3EcZ/v4sBmn+A3NpepuJzBhOaEBbR7udonlHHn5DWidg==
+ dependencies:
+ "@babel/helper-module-transforms" "^7.22.15"
+ "@babel/helper-plugin-utils" "^7.22.5"
+ "@babel/helper-simple-access" "^7.22.5"
+
"@babel/plugin-transform-modules-systemjs@^7.22.5":
version "7.22.11"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1"
@@ -928,6 +992,13 @@
"@babel/helper-plugin-utils" "^7.22.5"
"@babel/plugin-syntax-numeric-separator" "^7.10.4"
+"@babel/plugin-transform-object-assign@^7.16.7":
+ version "7.22.5"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.22.5.tgz#290c1b9555dcea48bb2c29ad94237777600d04f9"
+ integrity sha512-iDhx9ARkXq4vhZ2CYOSnQXkmxkDgosLi3J8Z17mKz7LyzthtkdVchLD7WZ3aXeCuvJDOW3+1I5TpJmwIbF9MKQ==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.22.5"
+
"@babel/plugin-transform-object-rest-spread@^7.22.5":
version "7.22.11"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.11.tgz#dbbb06ce783cd994a8f430d8cefa553e9b42ca62"
@@ -1116,6 +1187,16 @@
"@babel/helper-plugin-utils" "^7.22.5"
"@babel/plugin-syntax-typescript" "^7.22.5"
+"@babel/plugin-transform-typescript@^7.22.15":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.15.tgz#15adef906451d86349eb4b8764865c960eb54127"
+ integrity sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.22.5"
+ "@babel/helper-create-class-features-plugin" "^7.22.15"
+ "@babel/helper-plugin-utils" "^7.22.5"
+ "@babel/plugin-syntax-typescript" "^7.22.5"
+
"@babel/plugin-transform-unicode-escapes@^7.22.10":
version "7.22.10"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz#c723f380f40a2b2f57a62df24c9005834c8616d9"
@@ -1274,6 +1355,17 @@
"@babel/plugin-transform-modules-commonjs" "^7.22.11"
"@babel/plugin-transform-typescript" "^7.22.11"
+"@babel/preset-typescript@^7.16.7":
+ version "7.22.15"
+ resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.22.15.tgz#43db30516fae1d417d748105a0bc95f637239d48"
+ integrity sha512-HblhNmh6yM+cU4VwbBRpxFhxsTdfS1zsvH9W+gEjD0ARV9+8B4sNfpI6GuhePti84nuvhiwKS539jKPFHskA9A==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.22.5"
+ "@babel/helper-validator-option" "^7.22.15"
+ "@babel/plugin-syntax-jsx" "^7.22.5"
+ "@babel/plugin-transform-modules-commonjs" "^7.22.15"
+ "@babel/plugin-transform-typescript" "^7.22.15"
+
"@babel/register@^7.12.1", "@babel/register@^7.13.16":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.22.5.tgz#e4d8d0f615ea3233a27b5c6ada6750ee59559939"
@@ -1347,6 +1439,15 @@
"@babel/helper-validator-identifier" "^7.22.5"
to-fast-properties "^2.0.0"
+"@babel/types@^7.22.15":
+ version "7.22.19"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.19.tgz#7425343253556916e440e662bb221a93ddb75684"
+ integrity sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==
+ dependencies:
+ "@babel/helper-string-parser" "^7.22.5"
+ "@babel/helper-validator-identifier" "^7.22.19"
+ to-fast-properties "^2.0.0"
+
"@base2/pretty-print-object@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1743,6 +1844,13 @@
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+"@egjs/hammerjs@^2.0.17":
+ version "2.0.17"
+ resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+ integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+ dependencies:
+ "@types/hammerjs" "^2.0.36"
+
"@emotion/babel-plugin@^11.11.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -1812,6 +1920,13 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+"@emotion/is-prop-valid@^0.8.2":
+ version "0.8.8"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+ integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+ dependencies:
+ "@emotion/memoize" "0.7.4"
+
"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
@@ -2464,6 +2579,13 @@
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
+"@gluestack-style/animation-plugin@^0.1.7":
+ version "0.1.12"
+ resolved "https://registry.yarnpkg.com/@gluestack-style/animation-plugin/-/animation-plugin-0.1.12.tgz#887b57097397817c31fef25c8c53af381c11633e"
+ integrity sha512-lkj8iY5JBnhroUkP5gWE1zEpocb5GAK/G9SxL8DdWYQrsWOFpXr/mF/K67Dbxiv/n4B9BVff7sNTAddju+4UAw==
+ dependencies:
+ "@legendapp/motion" "^2.2.0"
+
"@gluestack-style/animation-plugin@latest":
version "0.1.7"
resolved "https://registry.yarnpkg.com/@gluestack-style/animation-plugin/-/animation-plugin-0.1.7.tgz#c9feae42684a48f2b5ece932681837d4b3ce7104"
@@ -2497,7 +2619,7 @@
"@babel/traverse" "^7.20.5"
lodash.merge "^4.6.2"
-"@gluestack-style/react@^0.1.11", "@gluestack-style/react@^0.1.33":
+"@gluestack-style/react@^0.1.33":
version "0.1.33"
resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.1.33.tgz#cd18f38bf359527e4f79d223bb07e9024f40ba4f"
integrity sha512-wBdoOA3i/cp0EcgJnwJgL1a8BATjbX/pCZgWm31N6sZOgCB4Phq7m0bDjfSpeJ8sKpOEDlUP5wYCo7Yww0mbqA==
@@ -2505,6 +2627,14 @@
inline-style-prefixer "^6.0.1"
normalize-css-color "^1.0.2"
+"@gluestack-style/react@^0.2.11-alpha.0", "@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21", "@gluestack-style/react@^0.2.49":
+ version "0.2.51"
+ resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.51.tgz#0cfcca4f97f908ed3a352bd7e2336d436cc22415"
+ integrity sha512-21TLr+e7KneP8N1d1iMKG6npMdYb/oPN/t5KZ/2kns2mg9NVCrfVmVuuMYKo+Xcej95BFOHuGuomskzLwdK1HQ==
+ dependencies:
+ inline-style-prefixer "^6.0.1"
+ normalize-css-color "^1.0.2"
+
"@gluestack-ui/actionsheet@^0.2.16", "@gluestack-ui/actionsheet@^0.2.7", "@gluestack-ui/actionsheet@latest":
version "0.2.16"
resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.16.tgz#052a733966c517450a3cd6f832932ccf77924867"
@@ -3423,6 +3553,59 @@
resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
+"@motionone/animation@^10.12.0":
+ version "10.15.1"
+ resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
+ integrity sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==
+ dependencies:
+ "@motionone/easing" "^10.15.1"
+ "@motionone/types" "^10.15.1"
+ "@motionone/utils" "^10.15.1"
+ tslib "^2.3.1"
+
+"@motionone/dom@10.12.0":
+ version "10.12.0"
+ resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
+ integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
+ dependencies:
+ "@motionone/animation" "^10.12.0"
+ "@motionone/generators" "^10.12.0"
+ "@motionone/types" "^10.12.0"
+ "@motionone/utils" "^10.12.0"
+ hey-listen "^1.0.8"
+ tslib "^2.3.1"
+
+"@motionone/easing@^10.15.1":
+ version "10.15.1"
+ resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.15.1.tgz#95cf3adaef34da6deebb83940d8143ede3deb693"
+ integrity sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==
+ dependencies:
+ "@motionone/utils" "^10.15.1"
+ tslib "^2.3.1"
+
+"@motionone/generators@^10.12.0":
+ version "10.15.1"
+ resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.15.1.tgz#dc6abb11139d1bafe758a41c134d4c753a9b871c"
+ integrity sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==
+ dependencies:
+ "@motionone/types" "^10.15.1"
+ "@motionone/utils" "^10.15.1"
+ tslib "^2.3.1"
+
+"@motionone/types@^10.12.0", "@motionone/types@^10.15.1":
+ version "10.15.1"
+ resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.15.1.tgz#89441b54285012795cbba8612cbaa0fa420db3eb"
+ integrity sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==
+
+"@motionone/utils@^10.12.0", "@motionone/utils@^10.15.1":
+ version "10.15.1"
+ resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.15.1.tgz#6b5f51bde75be88b5411e084310299050368a438"
+ integrity sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==
+ dependencies:
+ "@motionone/types" "^10.15.1"
+ hey-listen "^1.0.8"
+ tslib "^2.3.1"
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -6060,6 +6243,11 @@
dependencies:
"@types/node" "*"
+"@types/hammerjs@^2.0.36":
+ version "2.0.42"
+ resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.42.tgz#d7a53edbc51b2c13a9a759c45d7b5e61243d7dba"
+ integrity sha512-Xxk14BrwHnGi0xlURPRb+Y0UNn2w3cTkeFm7pKMsYOaNgH/kabbJLhcBoNIodwsbTz7Z8KcWjtDvlGH0nc0U9w==
+
"@types/hast@^2.0.0":
version "2.3.5"
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
@@ -6085,6 +6273,11 @@
resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
+"@types/invariant@^2.2.35":
+ version "2.2.35"
+ resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+ integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
"@types/is-ci@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3"
@@ -11643,6 +11836,27 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
+framer-motion@^6.5.1:
+ version "6.5.1"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
+ integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
+ dependencies:
+ "@motionone/dom" "10.12.0"
+ framesync "6.0.1"
+ hey-listen "^1.0.8"
+ popmotion "11.0.3"
+ style-value-types "5.0.0"
+ tslib "^2.1.0"
+ optionalDependencies:
+ "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+ integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+ dependencies:
+ tslib "^2.1.0"
+
freeport-async@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/freeport-async/-/freeport-async-2.0.0.tgz#6adf2ec0c629d11abff92836acd04b399135bab4"
@@ -12427,6 +12641,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+hey-listen@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+ integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -15871,6 +16090,13 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+moti@^0.26.0:
+ version "0.26.0"
+ resolved "https://registry.yarnpkg.com/moti/-/moti-0.26.0.tgz#863e70e61c9d597f4fd701e588f41963335b927f"
+ integrity sha512-430HDIwhPQi/DkMvocyAZGkAX3ibmbyF3Fj23GuhbTB+RUXYTOnbsvygr89ABJjllYuxx4Xjd2Z4Qab0Su5mcg==
+ dependencies:
+ framer-motion "^6.5.1"
+
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -17187,6 +17413,16 @@ polished@^4.2.2:
dependencies:
"@babel/runtime" "^7.17.8"
+popmotion@11.0.3:
+ version "11.0.3"
+ resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+ integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+ dependencies:
+ framesync "6.0.1"
+ hey-listen "^1.0.8"
+ style-value-types "5.0.0"
+ tslib "^2.1.0"
+
portfinder@^1.0.26:
version "1.0.32"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -18145,6 +18381,17 @@ react-native-codegen@^0.70.6:
jscodeshift "^0.13.1"
nullthrows "^1.1.1"
+react-native-gesture-handler@^2.13.1:
+ version "2.13.1"
+ resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.13.1.tgz#bad89caacd62c4560b9953b02f85f37ee42d5d4c"
+ integrity sha512-hW454X7sjuiBN+lobqw63pmT3boAmTl5OP6zQLq83iEe4T6PcHZ9lxzgCrebtgmutY8cJfq9rM2dOUVh9WBcww==
+ dependencies:
+ "@egjs/hammerjs" "^2.0.17"
+ hoist-non-react-statics "^3.3.0"
+ invariant "^2.2.4"
+ lodash "^4.17.21"
+ prop-types "^15.7.2"
+
react-native-gradle-plugin@^0.70.3:
version "0.70.3"
resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
@@ -18164,6 +18411,19 @@ react-native-modal-selector@^2.1.1:
dependencies:
prop-types "^15.5.10"
+react-native-reanimated@~2.12.0:
+ version "2.12.0"
+ resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e"
+ integrity sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==
+ dependencies:
+ "@babel/plugin-transform-object-assign" "^7.16.7"
+ "@babel/preset-typescript" "^7.16.7"
+ "@types/invariant" "^2.2.35"
+ invariant "^2.2.4"
+ lodash.isequal "^4.5.0"
+ setimmediate "^1.0.5"
+ string-hash-64 "^1.0.3"
+
react-native-safe-area-context@4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
@@ -19825,6 +20085,11 @@ string-argv@0.3.2:
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+string-hash-64@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+ integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
string-hash@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
@@ -20062,6 +20327,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
+style-value-types@5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+ integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+ dependencies:
+ hey-listen "^1.0.8"
+ tslib "^2.1.0"
+
styled-components@^5.3.0:
version "5.3.11"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
@@ -20685,7 +20958,7 @@ tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==