Merge branch 'patch' of github.com:gluestack/gluestack-style into fea…

…t/create-config-style-api

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

@@ -11,6 +11,7 @@ import {
   Pressable as RNPressable,
   Text as RNText,
   StyleSheet,
+  Switch,
   View,
 } from 'react-native';
 import {
@@ -29,6 +30,7 @@ import { AddIcon, Box, Icon } from '@gluestack/design-system';
 import { AlertCircle, Circle, Sun } from 'lucide-react-native';
 
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { ScrollView } from 'react-native';
 
 const styleshet = StyleSheet.create({
   style: {
@@ -194,6 +196,9 @@ const Text1 = styled(
   },
   { ancestorStyle: ['_text'], componentName: 'TEXT' }
 );
+
+const StyledSwitch = styled(ScrollView, {});
+
 export function ContextBasedStyles() {
   const [state, setState] = useState(false);
 
@@ -206,7 +211,38 @@ export function ContextBasedStyles() {
       >
         <Text>color mode: {state ? 'dark' : 'light'}</Text>
       </Pressable>
-      <MyIcon as={Sun} size={32}></MyIcon>
+
+      <StyledSwitch
+        height={200}
+        width={200}
+        sx={{
+          props: {
+            contentContainerStyle: {
+              // backgroundColor: 'blue',
+            },
+          },
+        }}
+
+        // trackColor={{ false: '$green500', true: '$primary600' }}
+        // thumbColor="$red500"
+        // sx={{
+        //   props: { trackColor: { false: '$blue500', true: '$primary600' } },
+        // }}
+      >
+        <View
+          style={{ height: 100, width: 100, backgroundColor: 'red' }}
+        ></View>
+      </StyledSwitch>
+
+      {/* 
+      <StyledSwitch
+        // trackColor={{ false: '$green500', true: '$primary600' }}
+        thumbColor="$red500"
+        sx={{
+          props: { trackColor: { false: '$blue500', true: '$primary600' } },
+        }}
+      ></StyledSwitch> */}
+
       <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
       {/* <Box1
@@ -249,15 +285,12 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  // 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 value = useBreakpointValue({
+    base: true,
+    sm: false,
+  });
+
+  console.log(value, 'value here');
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>

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.51",
   "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

@@ -28,6 +28,7 @@ export function useBreakpointValue(values: BreakPointValue) {
   Object.keys(mediaQueries).forEach((key: any) => {
     const currentBreakpoint: any = extractWidthValues(mediaQueries[key]);
     const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width);
+
     mediaQueriesBreakpoints.push({
       key: key,
       breakpoint: currentBreakpoint[0],
@@ -39,7 +40,7 @@ export function useBreakpointValue(values: BreakPointValue) {
   mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint);
 
   mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => {
-    breakpoint.value = values[breakpoint.key]
+    breakpoint.value = values.hasOwnProperty(breakpoint.key)
       ? values[breakpoint.key]
       : mediaQueriesBreakpoints[index - 1].value;
   });

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

@@ -1145,10 +1145,17 @@ export function verboseStyled<P, Variants, ComCon>(
     Object.assign(incomingComponentProps, applySxAncestorPassingProps);
     Object.assign(incomingComponentProps, componentProps);
 
-    Object.assign(themeDefaultProps, incomingComponentProps);
+    const {
+      variantProps: defaultVariantProps,
+      restProps: defaultComponentPropsWithoutVariants,
+    } = getVariantProps(themeDefaultProps, theme);
+
+    const {
+      variantProps: inlineVariantProps,
+      restProps: inlineComponentPropsWithoutVariants,
+    } = getVariantProps(incomingComponentProps, theme);
 
-    const { variantProps, restProps: componentPropsWithoutVariants } =
-      getVariantProps(themeDefaultProps, theme);
+    const variantProps = Object.assign(defaultVariantProps, inlineVariantProps);
 
     const {
       baseStyleCSSIds: applyBaseStyleCSSIds,
@@ -1320,10 +1327,17 @@ export function verboseStyled<P, Variants, ComCon>(
     // 520ms
 
     // Inline prop based style resolution TODO: Diagram insertion
-    const resolvedInlineProps = resolveInlineProps(
+    const defaultResolvedInlineProps = resolveInlineProps(
       componentStyleConfig,
       componentExtendedConfig,
-      componentPropsWithoutVariants,
+      defaultComponentPropsWithoutVariants,
+      CONFIG
+    );
+
+    const inlineResolvedInlineProps = resolveInlineProps(
+      componentStyleConfig,
+      componentExtendedConfig,
+      inlineComponentPropsWithoutVariants,
       CONFIG
     );
 
@@ -1336,7 +1350,10 @@ export function verboseStyled<P, Variants, ComCon>(
 
     const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
       convertUtiltiyToSXFromProps(
-        componentPropsWithoutVariants,
+        Object.assign(
+          defaultComponentPropsWithoutVariants,
+          inlineComponentPropsWithoutVariants
+        ),
         styledSystemProps,
         componentStyleConfig
       );
@@ -1350,7 +1367,9 @@ export function verboseStyled<P, Variants, ComCon>(
 
     let containsSX = false;
     Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
-    Object.assign(applyComponentInlineProps, resolvedInlineProps);
+    Object.assign(applyComponentInlineProps, defaultResolvedInlineProps);
+
+    Object.assign(applyComponentInlineProps, inlineResolvedInlineProps);
     Object.assign(applyComponentInlineProps, filteredComponentRemainingProps);
 
     if (
@@ -1563,14 +1582,29 @@ export function verboseStyled<P, Variants, ComCon>(
           CONFIG
         );
 
+        // if (componentName === 'Switch') {
+        //   console.log(
+        //     // passingPropsUpdated,
+        //     // resolvedPassingRemainingProps,
+        //     resolvedInlineProps,
+        //     // componentStyleConfig,
+        //     '>>>>>>'
+        //   );
+        // }
+
+        // Object.assign(applyComponentInlineProps, defaultResolvedInlineProps);
+        // Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
+        // Object.assign(applyComponentInlineProps, defaultInlineResolvedInlineProps);
+        // Object.assign(applyComponentInlineProps, filteredComponentRemainingProps);
+
         Object.assign(
           applyComponentInlineProps,
           filteredPassingRemainingPropsUpdated
         );
 
         Object.assign(applyComponentInlineProps, resolvedPassingRemainingProps);
 
-        Object.assign(applyComponentInlineProps, resolvedInlineProps);
+        Object.assign(applyComponentInlineProps, inlineResolvedInlineProps);
 
         Object.assign(
           applyComponentInlineProps,
@@ -1742,14 +1776,14 @@ export function verboseStyled<P, Variants, ComCon>(
           ancestorStyleContext
         ) {
           const sxDescendantCSSIds = mergeArraysInObjects(
+            ancestorStyleContext.sx,
             applySxDescendantStyleCSSIdsAndPropsWithKey.current,
-            applySxDescendantStateStyleCSSIdsAndPropsWithKey.current,
-            ancestorStyleContext.component
+            applySxDescendantStateStyleCSSIdsAndPropsWithKey.current
           );
           const componentDescendantCSSIds = mergeArraysInObjects(
+            ancestorStyleContext.component,
             applyDescendantsStyleCSSIdsAndPropsWithKey,
-            applyDescendantStateStyleCSSIdsAndPropsWithKey,
-            ancestorStyleContext.sx
+            applyDescendantStateStyleCSSIdsAndPropsWithKey
           );
 
           return {
@@ -1793,10 +1827,10 @@ export function verboseStyled<P, Variants, ComCon>(
       ...applySxStateBaseStyleCSSIds.current,
     ];
 
-    Object.assign(resolvedInlineProps, applyComponentInlineProps);
+    // Object.assign(resolvedInlineProps, applyComponentInlineProps);
 
     const resolvedStyleProps = generateStylePropsFromCSSIds(
-      resolvedInlineProps,
+      applyComponentInlineProps,
       styleCSSIds,
       CONFIG,
       activeTheme

yarn.lock

@@ -2505,14 +2505,6 @@
     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":
-  version "0.2.46"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.46.tgz#c408f4c05a7374690c8ebd952aa95b0a1d390c4e"
-  integrity sha512-ujpOIrt/b08svtUSLn4wSCn548H7lIe3oHlBCTHwDvmjheuVsXyIrECtNBA+mrL5mtkCaBmkB9iUJTWD601V+A==
-  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"