Merge pull request #445 from gluestack/release/@gluestack-style/react…

…@0.2.48

Release/@gluestack style/[email protected]

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -16,9 +16,10 @@ import {
 import {
   AsForwarder,
   createStyled,
-  styled1,
+  styled,
   Theme,
   useBreakpointValue,
+  useColorMode,
   useStyled,
   useToken,
 } from '@gluestack-style/react';
@@ -40,6 +41,16 @@ const Pressable = styled(
   {
     bg: '$red200',
     p: '$2',
+    props: {
+      variant: 'solid',
+    },
+    variants: {
+      variant: {
+        solid: {
+          bg: '$red400',
+        },
+      },
+    },
   },
   {
     componentName: 'Pressable',
@@ -184,8 +195,17 @@ const Text1 = styled(
   { ancestorStyle: ['_text'], componentName: 'TEXT' }
 );
 export function ContextBasedStyles() {
+  const [state, setState] = useState(false);
+
   return (
-    <Wrapper colorMode="dark">
+    <Wrapper colorMode={state ? 'dark' : 'light'}>
+      <Pressable
+        onPress={() => {
+          setState(!state);
+        }}
+      >
+        <Text>color mode: {state ? 'dark' : 'light'}</Text>
+      </Pressable>
       <MyIcon as={Sun} size={32}></MyIcon>
       <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
@@ -229,10 +249,15 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  const value = useToken('colors', 'red500');
-
-  console.log(value, 'value here');
-
+  // const value = useToken('colors', 'red500');
+  // const value = useBreakpointValue({
+  //   base: 'base',
+  //   sm: 'sm',
+  //   md: 'md',
+  //   // md: 'md',
+  // });
+  const colorMode = useColorMode();
+  console.log(colorMode, 'color mode');
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>
@@ -299,6 +324,12 @@ export function ContextBasedStylesContent() {
 const renderItem = (item: any) => (
   <Pressable
     key={item}
+    variant="solid"
+    sx={{
+      props: {
+        variant: 'solid',
+      },
+    }}
     // sx={{
     //   bg: '$amber400',
     // }}

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.47",
+  "version": "0.2.48",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/createStyled.ts

@@ -15,9 +15,9 @@ export class IStyled {
 }
 
 export const createStyled = (plugins: any) => {
-  let styledComponent = <P, Variants, ConCom, PluginType>(
+  let styledComponent = <P, Variants, ConCom>(
     Component: React.ComponentType<P>,
-    styledObject: ITheme<Variants, P, PluginType>,
+    styledObject: ITheme<Variants, P>,
     compConfig: IComponentStyleConfig<ConCom> = {},
     extendedConfig: any = {}
   ) => {

packages/react/src/hooks/useBreakpointValue.ts

@@ -9,23 +9,46 @@ type BreakPointValue = Partial<{
   [key in keyof ICustomConfig['tokens']['breakpoints']]: any;
 }>;
 
+function getLastValidObject(mediaQueries: any) {
+  for (let i = mediaQueries.length - 1; i >= 0; i--) {
+    if (mediaQueries[i].isValid) {
+      return mediaQueries[i];
+    }
+  }
+  return null; // No valid object found
+}
+
 export function useBreakpointValue(values: BreakPointValue) {
   let { width } = useWindowDimensions();
   const theme = useStyled();
   const mediaQueries = theme?.config?.tokens?.mediaQueries;
 
-  let validBreakpoints: any = [];
+  let mediaQueriesBreakpoints: any = [];
+
   Object.keys(mediaQueries).forEach((key: any) => {
     const currentBreakpoint: any = extractWidthValues(mediaQueries[key]);
     const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width);
-    if (isValid) {
-      validBreakpoints.push({ key: key, value: currentBreakpoint[0] });
-    }
+    mediaQueriesBreakpoints.push({
+      key: key,
+      breakpoint: currentBreakpoint[0],
+      query: mediaQueries[key],
+      isValid: isValid,
+    });
   });
 
-  if (validBreakpoints.length === 0) {
+  mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint);
+
+  mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => {
+    breakpoint.value = values[breakpoint.key]
+      ? values[breakpoint.key]
+      : mediaQueriesBreakpoints[index - 1].value;
+  });
+
+  const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
+
+  if (!lastValidObject) {
     return values;
   }
-  validBreakpoints.sort((a: any, b: any) => a.value - b.value);
-  return values[validBreakpoints[validBreakpoints.length - 1].key];
+
+  return lastValidObject.value;
 }

packages/react/src/hooks/useColorMode.ts

@@ -1,9 +1,22 @@
-import { get } from '../core/colorMode';
+import { get, onChange } from '../core/colorMode';
+import { useState, useEffect } from 'react';
 
 /**
  *
  * @returns Current color mode value (light or dark)
  */
 export const useColorMode = () => {
-  return get();
+  const [currentColorMode, setCurrentColorMode] = useState(get());
+  useEffect(() => {
+    onChange((colorMode: any) => {
+      setCurrentColorMode(colorMode);
+    });
+    // remove onchage listener on unmount
+    () =>
+      onChange((colorMode: any) => {
+        setCurrentColorMode(colorMode);
+      });
+  }, []);
+
+  return currentColorMode;
 };

packages/react/src/hooks/useToken.ts

@@ -1,4 +1,5 @@
-import { useStyled, ICustomConfig } from '@gluestack-style/react';
+import { useStyled } from '../StyledProvider';
+import type { ICustomConfig } from '../types';
 
 /**
  *

packages/react/src/styled.tsx

@@ -823,7 +823,7 @@ const getStyleIdsFromMap = (
   return componentStyleObject;
 };
 
-export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
+export function verboseStyled<P, Variants, ComCon>(
   Component: React.ComponentType<P>,
   theme: Partial<IVerbosedTheme<Variants, P>>,
   componentStyleConfig: IComponentStyleConfig<ComCon> = {},
@@ -991,9 +991,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
     }: Omit<P, keyof Variants> &
-      Partial<
-        ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon, PluginType>
-      > &
+      Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
       Partial<UtilityProps<ITypeReactNativeStyles>> & {
         as?: any;
         children?: any;
@@ -1862,7 +1860,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
 
 export function styled<P, Variants, ComCon, PluginType = unknown>(
   Component: React.ComponentType<P>,
-  theme: ITheme<Variants, P, PluginType>,
+  theme: ITheme<Variants, P>,
   componentStyleConfig?: IComponentStyleConfig<ComCon>,
   ExtendedConfig?: ExtendedConfigType<PluginType>,
   BUILD_TIME_PARAMS?: {
@@ -1894,7 +1892,7 @@ export function styled<P, Variants, ComCon, PluginType = unknown>(
   theme = styledObj;
   const sxConvertedObject = convertStyledToStyledVerbosed(theme);
 
-  let StyledComponent = verboseStyled<P, Variants, ComCon, PluginType>(
+  let StyledComponent = verboseStyled<P, Variants, ComCon>(
     Component,
     sxConvertedObject,
     componentStyleConfig,