Merge pull request #453 from gluestack/feat/create-config-style-api

Feat/create config style api

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": "0.2.52-alpha.4",
   "keywords": [
     "React Native",
     "Next.js",

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;
@@ -37,7 +42,8 @@ export const StyledProvider: React.FC<{
   colorMode?: COLORMODES;
   children?: React.ReactNode;
   globalStyles?: any;
-}> = ({ config, colorMode, children, globalStyles }) => {
+  components: any;
+}> = ({ config, colorMode, children, globalStyles, components }) => {
   const currentConfig = React.useMemo(() => {
     //TODO: Add this later
     return platformSpecificSpaceUnits(config, Platform.OS);
@@ -90,12 +96,15 @@ export const StyledProvider: React.FC<{
     config?.globalStyle && createGlobalStyles(config.globalStyle);
   const contextValue = React.useMemo(() => {
     return {
-      config: currentConfig,
+      config: {
+        ...currentConfig,
+        components,
+      },
       globalStyle: globalStyleMap,
       animationDriverData,
       setAnimationDriverData,
     };
-  }, [currentConfig, globalStyleMap, animationDriverData]);
+  }, [currentConfig, globalStyleMap, components, animationDriverData]);
 
   return (
     <StyledContext.Provider value={contextValue}>

packages/react/src/createComponents.ts

@@ -0,0 +1,5 @@
+import { resolveComponentThemes } from './createConfig';
+
+export const createComponents = <T>(components: T): T => {
+  return resolveComponentThemes({}, components);
+};

packages/react/src/createConfig.ts

@@ -5,6 +5,7 @@ import { resolveStringToken } from './utils';
 import { stableHash } from './stableHash';
 import { propertyTokenMap } from './propertyTokenMap';
 import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
+import { GluestackStyleSheet } from './style-sheet';
 
 var globalPluginStore: never[] = [];
 function setGlobalPluginStore(plugins: any) {
@@ -46,24 +47,18 @@ export const createConfig = <
   }
   // 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) => {
@@ -90,29 +85,35 @@ const resolveThemes = (config: any) => {
   return newConfig;
 };
 
-const resolveComponentThemes = (config: any) => {
-  const newConfig = { ...config };
-  delete config.components;
-
+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
@@ -128,9 +129,10 @@ const resolveTheme = (
     'extended',
     extendedConfig
   );
+
   return {
-    extendedStyleIds: styledIds,
-    extendedVerbosedStyleIds: verbosedStyleIds,
+    styledIds,
+    verbosedStyleIds,
     theme: versboseComponentTheme,
   };
 };

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 = <T, Variants>(
+  theme: T | ITheme<Variants, ViewProps | ImageProps | TextProps>,
+  componentConfig?: Omit<IComponentStyleConfig, 'componentName'>,
+  BUILD_TIME_PARAMS?: any
+) => {
+  const createdStyles = {
+    theme,
+    componentConfig,
+    BUILD_TIME_PARAMS,
+  };
+
+  return createdStyles as {
+    theme: UnionToIntersection<
+      T | ITheme<Variants, ViewProps | ImageProps | TextProps>
+    >;
+    componentConfig?: Omit<IComponentStyleConfig, 'componentName'>;
+  };
+};

packages/react/src/index.ts

@@ -70,6 +70,7 @@ export type {
   Aliases,
   AliasesProps,
   ICustomConfig,
+  ICustomComponents,
   IStyledPlugin,
   IStyled,
   IAnimationDriverPlugin,
@@ -85,6 +86,9 @@ export { AsForwarder } from './AsForwarder';
 
 export * from './plugins';
 
+export { createStyle } from './createStyle';
+export { createComponents } from './createComponents';
+
 export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved';
 export { createConfig, getInstalledPlugins } from './createConfig';
 export * from './core';

packages/react/src/styled.tsx

@@ -1036,29 +1036,42 @@ export function verboseStyled<P, Variants, ComCon>(
       };
 
       const EXTENDED_THEME =
-        componentName && CONFIG?.components?.[componentName]?.theme?.theme;
+        componentName && CONFIG?.components?.[componentName];
 
       // Injecting style
       if (EXTENDED_THEME) {
-        theme.variants = deepMerge(theme.variants, EXTENDED_THEME.variants);
-        theme.defaultProps = deepMerge(
+        theme.variants = deepMerge(
+          theme.variants,
+          EXTENDED_THEME?.theme?.variants
+        );
+        //@ts-ignore
+        theme.baseStyle.props = deepMerge(
           theme.defaultProps,
-          EXTENDED_THEME.props
+          EXTENDED_THEME?.theme?.baseStyle.props
         );
-        // @ts-ignore
-        theme.props = deepMerge(theme.props, EXTENDED_THEME.props);
 
-        // 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,
-        ];
+        //@ts-ignore
+        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, EXTENDED_THEME?.verbosedStyleIds);
+          const extendedStylesToBeInjected = GluestackStyleSheet.resolve(
+            EXTENDED_THEME?.styledIds,
+            CONFIG,
+            componentExtendedConfig
+          );
+          GluestackStyleSheet.inject(extendedStylesToBeInjected);
+        }
       }
 
       //@ts-ignore

packages/react/src/types.ts

@@ -110,12 +110,6 @@ export type GlueStackConfig<
   globalStyle?: GlobalStyles<IGlobalAliases, IToken, IGlobalStyle>;
   plugins?: PluginType;
   themes?: ThemeStyles<IToken>;
-  components?: {
-    [key: string]: {
-      theme: Partial<GlobalStyles<IGlobalAliases, IToken, IGlobalStyle>>;
-      componentConfig?: IComponentStyleConfig;
-    };
-  };
 };
 
 export type ComponentsThemeType<IGlobalAliases, IToken, IComponents> = {
@@ -140,6 +134,12 @@ export type CreateGenericConfig = GlueStackConfig<
   GlobalPluginType
 >;
 
+export type CreateGenericComponents = GlueStackConfig<
+  Tokens,
+  GenericAliases,
+  GenericGlobalStyle
+>;
+
 // All Aliases
 export type Aliases = GSConfig['aliases'];
 export type Plugins = GSConfig['plugins'];
@@ -176,14 +176,12 @@ export type SxStyleProps<
 //@ts-ignore
 type GlobalVariants = GSConfig['globalStyle']['variants'];
 
-export type IComponentStyleConfig<ComCon = unknown> = Partial<
-  {
-    descendantStyle: any;
-    ancestorStyle: any;
-    resolveProps: any;
-    componentName: ComCon;
-  } & { [key: string]: any }
->;
+export type IComponentStyleConfig<ComCon = any> = Partial<{
+  descendantStyle: any;
+  ancestorStyle: any;
+  resolveProps: any;
+  componentName: ComCon;
+}>;
 
 export type Config = {
   alias: { [K: string]: any };
@@ -730,9 +728,18 @@ export type StyleIds = {
 
 export interface ICustomConfig {}
 
+export interface ICustomComponents {}
+
 export interface GSConfig
   extends Omit<CreateGenericConfig, keyof ICustomConfig>,
-    ICustomConfig {}
+    ICustomConfig,
+    GenericComponents {
+  components: ICustomComponents;
+}
+
+interface GenericComponents {
+  components: {};
+}
 
 /********************* COMPONENT PROPS TYPE *****************************************/
 
@@ -849,9 +856,9 @@ export type RNStyles<GenericComponentStyles> = TokenizedRNStyleProps<
   >
 >;
 
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  k: infer I
-) => void
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
   ? I
   : never;
 
@@ -937,3 +944,18 @@ export type GlobalStyleMap = Map<
     }>;
   }>
 >;
+
+export type ExtendedTheme<Variants> = ITheme<
+  Variants,
+  ViewProps | ImageProps | TextProps
+>;
+
+// export type CreateStyle<Component> = {
+//   theme: Component &
+//     ITheme<Component['variants'], ViewProps | ImageProps | TextProps>;
+//   componentConfig?: Omit<IComponentStyleConfig, 'componentName'>;
+// };
+
+export type CreateComponents<T> = {
+  [key in keyof T]: T[key];
+};

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);