fix: Fixed web support issues for Checkbox

App.tsx

@@ -357,8 +357,8 @@ const Index = () => {
           <HStack alignItems="center">
             {!!activeComponent && (
               <Pressable
-                onPress={() => setActiveComponent(undefined)}
                 alignSelf="center"
+                onPress={() => setActiveComponent(undefined)}
               >
                 <Icon
                   rawSize={15}

README.md

@@ -13,6 +13,8 @@
 <img alt="Licence" src="https://img.shields.io/github/license/agrawal-rohit/pearl-ui"> 
 </p>
 
+<br />
+
 <h4>Build consistent cross-platform mobile apps at <span style="color: #6356e5">lightning speed</span></h4>
 
 <div align="center">

package.json

@@ -36,14 +36,14 @@
     "expo-file-system": "~15.4.5",
     "expo-status-bar": "~1.6.0",
     "lodash": "^4.17.21",
-    "moti": "0.27.2",
+    "moti": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "~2.12.0",
+    "react-native": "^0.72.6",
+    "react-native-gesture-handler": "^2.12.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-reanimated": "3.3.0",
-    "react-native-web": "0.19.9"
+    "react-native-reanimated": "^3.3.0",
+    "react-native-web": "^0.19.9"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -155,4 +155,4 @@
       }
     ]
   }
-}
+}

src/components/atoms/collapse/collapse.tsx

@@ -7,7 +7,6 @@ import {
   BoxStyleProps,
   boxStyleFunctions,
 } from "../../../theme/src/style-functions";
-import { Easing } from "react-native-reanimated";
 import { useStyleProps } from "../../../hooks";
 
 export type CollapseProps = BoxProps & {
@@ -60,22 +59,16 @@ const Collapse = React.memo(
                 {...computedStyles}
                 from={{
                   ...(animateOpacity && { opacity: 0 }),
-                  height: 0,
+                  height: startingHeight,
                 }}
                 animate={{
                   ...(animateOpacity && { opacity: 1 }),
-                  height: show
-                    ? typeof actualHeightRef.current === "string" &&
-                      actualHeightRef.current.includes("auto")
-                      ? "auto"
-                      : actualHeightRef.current
-                    : startingHeight,
+                  height: actualHeightRef.current,
                 }}
                 transition={
                   {
                     dampingRatio: 1,
                     duration: 150,
-                    easing: Easing.inOut,
                     ...transition,
                     type: "spring",
                   } as MotiWithPearlStyleProps<
@@ -85,13 +78,12 @@ const Collapse = React.memo(
                 }
                 exit={{
                   ...(animateOpacity && { opacity: 0 }),
-                  height: 0,
+                  height: startingHeight as any,
                 }}
                 exitTransition={
                   {
                     dampingRatio: 1,
                     duration: 150,
-                    easing: Easing.inOut,
                     ...exitTransition,
                     type: "spring",
                   } as MotiWithPearlStyleProps<
@@ -102,15 +94,16 @@ const Collapse = React.memo(
               >
                 <Box
                   onLayout={({ nativeEvent }) => {
+                    const currentHeight =
+                      nativeEvent.layout.height +
+                      (computedStyles.style.paddingTop || 0) +
+                      (computedStyles.style.paddingBottom || 0);
+
                     if (
                       typeof actualHeightRef.current === "string" ||
-                      nativeEvent.layout.height > actualHeightRef.current
+                      currentHeight > actualHeightRef.current
                     )
-                      actualHeightRef.current = Math.ceil(
-                        nativeEvent.layout.height +
-                          (computedStyles.style.paddingTop || 0) +
-                          (computedStyles.style.paddingBottom || 0)
-                      );
+                      actualHeightRef.current = Math.ceil(currentHeight);
                   }}
                 >
                   {children}

src/components/atoms/pressable/pressable.tsx

@@ -124,9 +124,13 @@ const Pressable = React.memo(
 
       const containerStyles = {
         alignSelf: "flex-start",
+        ..._.pick(props.animate, STYLE_PROPS_FOR_CONTAINER),
         ..._.pick(props.style, STYLE_PROPS_FOR_CONTAINER),
       };
-      const childStyles = _.omit(props.style || {}, STYLE_PROPS_FOR_CONTAINER);
+      const childStyles = _.omit(
+        { ...((props.style as object) || {}) },
+        STYLE_PROPS_FOR_CONTAINER
+      );
 
       // Methods to handle local pressable state
       const onPressInHandler = () => {

src/components/molecules/checkbox/checkbox.config.ts

@@ -40,6 +40,12 @@ const CheckboxConfig: MolecularComponentConfig<CheckboxAtoms> = {
         borderColor: "danger.500",
       },
     },
+    icon: {
+      transition: {
+        type: "timing",
+        duration: 50,
+      },
+    },
     text: {
       alignSelf: "center",
     },
@@ -100,12 +106,10 @@ const CheckboxConfig: MolecularComponentConfig<CheckboxAtoms> = {
         },
       },
       icon: {
-        animate: {
-          opacity: 0,
-          color: "neutral.50",
-        },
+        opacity: 0,
         _checked: {
           opacity: 1,
+          color: "neutral.50",
         },
       },
     },
@@ -121,9 +125,7 @@ const CheckboxConfig: MolecularComponentConfig<CheckboxAtoms> = {
         },
       },
       icon: {
-        animate: {
-          opacity: 0,
-        },
+        opacity: 0,
         _checked: {
           opacity: 1,
           color: "primary.500",

src/components/molecules/radio/radio.config.ts

@@ -31,6 +31,7 @@ const RadioConfig: MolecularComponentConfig<RadioAtoms> = {
         borderColor: "danger.500",
       },
       transition: {
+        type: "timing",
         duration: 50,
       },
     },
@@ -39,6 +40,7 @@ const RadioConfig: MolecularComponentConfig<RadioAtoms> = {
       h: "100%",
       borderRadius: "full",
       transition: {
+        type: "timing",
         duration: 50,
       },
     },

src/hooks/state/useDynamicStateStyle.tsx

@@ -1,9 +1,12 @@
-import { boxStyleFunctions } from "../../theme/src/style-functions";
+import _ from "lodash";
+import {
+  allStyleFunctions,
+  boxStyleFunctions,
+} from "../../theme/src/style-functions";
 import { ComponentTypes, StyleFunctionContainer } from "../../theme/src/types";
-import defaultRNStyles from "../../theme/utils/default-rn-styles";
-import { getKeys } from "../../theme/utils/type-helpers";
 import { removeUndefined } from "../../theme/utils/utils";
 import { useStateWithStyleProps } from "../useStateWithStyleProps";
+import { NON_ANIMATEABLE_STYLE_PROPS } from "../utils/utils";
 
 /**
  * Hook to manage a pressed state and compose extra styling while a component is pressed
@@ -27,32 +30,30 @@ export const useDynamicStateStyle = (
   // Override the pressed state if the parentStateValue is provided
   let stateStyles = useStateWithStyleProps(props[stateKey], styleFunctions);
 
+  delete props[stateKey];
+
   // If there are no state styles, return the original props
   if (!stateStyles) return props;
 
-  delete props[stateKey];
+  const animateableStyles = _.omit(stateStyles, NON_ANIMATEABLE_STYLE_PROPS);
+  const allStylePropertyKeys = allStyleFunctions.map((val) => val.property);
+  const animateableStyleProperties = Object.values(
+    _.omit(allStylePropertyKeys, NON_ANIMATEABLE_STYLE_PROPS)
+  ) as string[];
+
   let finalProps = props;
 
   // If the component is animateable, add missing required styles from the 'from' prop to the base style
   if (animateable) {
-    finalProps.animate = getKeys(stateStyles).reduce((final, key: any) => {
-      if (getKeys(defaultRNStyles).includes(key)) {
-        return {
-          [key]: (defaultRNStyles as any)[key],
-          ...removeUndefined(final),
-        };
-      }
-
-      return final;
-    }, finalProps.animate);
-
     // If the current state is true, add the state styles to the animate prop
     if (currentState) {
       finalProps.animate = {
         ...finalProps.animate,
-        ...removeUndefined(stateStyles),
+        ...removeUndefined(animateableStyles),
       };
     }
+
+    if (!finalProps.animate) finalProps.animate = undefined;
   } else {
     // If the component is not animateable and the current state is true, add the state styles to the style prop
     if (currentState) {

src/hooks/useMotiWithStyleProps.ts

@@ -2,14 +2,18 @@ import { useMemo } from "react";
 import { getKeys } from "../theme/utils/type-helpers";
 import { StyleFunctionContainer } from "../theme/src/types";
 import { useTheme } from "./useTheme";
-import { composeCleanStyleProps, composeStyleProps } from "./utils/utils";
+import {
+  NON_ANIMATEABLE_STYLE_PROPS,
+  composeCleanStyleProps,
+  composeStyleProps,
+} from "./utils/utils";
 import {
   layoutPropertiesShorthand,
   spacingPropertiesShorthand,
 } from "../theme/src/style-properties";
-import _ from "lodash";
 import { removeUndefined } from "../theme/utils/utils";
 import { useWindowDimensions } from "react-native";
+import _ from "lodash";
 
 const shorthandPropMapper = {
   ...layoutPropertiesShorthand,
@@ -34,28 +38,7 @@ export const useMotiWithStyleProps = (
     () => composeStyleProps(styleFunctions),
     [styleFunctions]
   );
-
-  const nonAnimateableStyleProps = [
-    "flex",
-    "flexShrink",
-    "flexGrow",
-    "flexBasis",
-    "flexDirection",
-    "flexWrap",
-    "shadowOffset",
-    "textShadowOffset",
-    "fontFamily",
-    "fontWeight",
-    "fontSize",
-    "lineHeight",
-    "fontStyle",
-    "textAlign",
-    "letterSpacing",
-    "textDecorationLine",
-    "textDecorationStyle",
-    "textTransform",
-  ];
-  const animateableStyles = _.omit(props.style, nonAnimateableStyleProps);
+  const animateableStyles = _.omit(props.style, NON_ANIMATEABLE_STYLE_PROPS);
 
   // Convert 'from', 'animate', 'transition', 'exit', 'exitTransition' props
   ["from", "animate", "transition", "exit", "exitTransition"].forEach(
@@ -111,7 +94,7 @@ export const useMotiWithStyleProps = (
             };
           }, props[prop]);
 
-          if (prop === "transition" && !props[prop])
+          if (!props[prop])
             props[prop] = {
               type: "spring",
               dampingRatio: 1,
@@ -122,6 +105,6 @@ export const useMotiWithStyleProps = (
     }
   );
 
-  // props.style = _.pick(props.style, nonAnimateableStyleProps);
+  // props.style = _.pick(props.style, NON_ANIMATEABLE_STYLE_PROPS);
   return props;
 };

src/hooks/utils/utils.ts

@@ -22,6 +22,27 @@ export const MOTI_PROPS = [
   "animateInitialState",
 ];
 
+export const NON_ANIMATEABLE_STYLE_PROPS = [
+  "flex",
+  "flexShrink",
+  "flexGrow",
+  "flexBasis",
+  "flexDirection",
+  "flexWrap",
+  "shadowOffset",
+  "textShadowOffset",
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "fontStyle",
+  "textAlign",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "textTransform",
+];
+
 /**
  * Checks if a key exists in an object and throws an error if it doesn't.
  * @param key - The key to check for.

src/pearl.tsx

@@ -150,10 +150,10 @@ export function pearl<
             {...convertedProps}
             key={
               Platform.OS === "web" &&
-              ["Text", "Icon", "Box"].includes(config.componentName as string)
+              ["Text", "Icon"].includes(config.componentName as string)
                 ? (convertedProps as any).key!
                   ? `${(convertedProps as any).key!}-${colorMode}`
-                  : `${colorMode}`
+                  : `${colorMode}-${Math.random()}`
                 : undefined
             }
             ref={ref}