react-native-varia 0.2.3 → 0.3.0

package/lib/varia/utils.ts

@@ -1,3 +1,9 @@
+import { Platform } from 'react-native'
+
+type StyleObj = {
+  variants?: Record<string, Record<string, Record<string, any>>>
+  [key: string]: any
+}
 export function hexToRgba(hex: string, alpha: number = 1) {
   hex = hex.replace(/^#/, '')
 
@@ -22,6 +28,7 @@ export function hexToRgba(hex: string, alpha: number = 1) {
 
 import {Dimensions, PixelRatio} from 'react-native'
 import {
+  AlignSelf,
   AlphaPalette,
   ColorPalette,
   ColorPaletteBackground,
@@ -281,3 +288,62 @@ export const createPreset = <T extends CreatePresetDTO>(
       }
   }
 }
+
+export function computeFlexSync(
+  parentFlex: number,
+  parentStretch: AlignSelf,
+  parentDirection: 'row' | 'column',
+) {
+  const flex = typeof parentFlex === 'number' ? parentFlex : 0
+  const stretch = parentStretch === 'stretch'
+  const dir = parentDirection === 'row' ? 'row' : 'column'
+
+  let childFlex = flex
+
+  if (dir === 'column') {
+    if (flex === 0 && stretch) {
+      childFlex = 1
+    } else if (flex >= 1 && !stretch) {
+      childFlex = 0
+    } else if (flex >= 1 && stretch) {
+      childFlex = 1
+    }
+  } else if (dir === 'row') {
+    if (flex === 0 && stretch) {
+      childFlex = 0
+    }
+  }
+
+  return {flex: childFlex}
+}
+
+export function getVariantValue<
+  VariantGroup extends string,
+  VariantValue extends string | undefined,
+  PropName extends string
+>(
+  styleObj: StyleObj,
+  variantGroup: VariantGroup,
+  variantValue: VariantValue,
+  propName: PropName
+): undefined | any {
+  if (variantValue == null) {
+    // Si no hay variante, devolvemos undefined
+    return undefined
+  }
+
+  if (Platform.OS === 'web') {
+    const variants = styleObj.variants
+    if (!variants) return undefined
+
+    const group = variants[variantGroup] as any
+    if (!group) return undefined
+
+    const variantStyles = group[variantValue] as any
+    if (!variantStyles) return undefined
+
+    return variantStyles[propName]
+  } else {
+    return (styleObj as any)[propName]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "bin": {
     "varia": "bin/cli.js"
   },

package/lib/theme/Button.recipe-old.tsx

@@ -1,67 +0,0 @@
-import { StyleSheet } from "react-native-unistyles"
-
-const ButtonStyles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: 'tomato',
-        },
-        secondary: {
-          backgroundColor: theme.colors.foreground,
-        }
-      },
-      size: {
-        sm: {
-          height: 32,
-          maxHeight: 32,
-          padding: 6,
-        },
-        md: {
-          maxHeight: 48,
-          height: 48,
-          padding: 8,
-        },
-        lg: {
-          maxHeight: 64,
-          height: 64,
-          padding: 12,
-        },
-        xl: {
-          maxHeight: 80,
-          height: 80,
-          padding: 16,
-        }
-      }
-    },
-  },
-  text: {
-    variants: {
-      colorPalette: {
-        primary: {
-          color: 'white',
-        },
-        secondary: {
-          color: theme.colors.categoryAquamarine,
-        }
-      },
-      size: {
-        sm: {
-          fontSize: 24,
-        },
-        md: {
-          fontSize: 28,
-        },
-        lg: {
-          fontSize: 32,
-        },
-        xl: {
-          fontSize: 36,
-        }
-      }
-    }
-  }
-}))
-
-
-export default ButtonStyles

package/lib/theme/SlidingDrawer.recipe.tsx

@@ -1,53 +0,0 @@
-import {StyleSheet} from 'react-native-unistyles'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-export const SlidingDrawerTokens = {
-  defaultProps: {
-    variant: 'solid',
-    animation: 'defaultSpring',
-  },
-  variants: {
-    animation: {
-      defaultSpring: {
-        type: 'withSpring' as const,
-        props: {
-          damping: 20,
-          stiffness: 200,
-          mass: 1,
-          overshootClamping: true,
-        },
-      },
-      slowSpring: {
-        type: 'withSpring' as const,
-        props: {
-          damping: 200,
-          stiffness: 20,
-          mass: 10,
-          overshootClamping: true,
-        },
-      },
-      defaultTiming: {
-        type: 'withTiming' as const,
-        props: {
-          duration: 1000,
-        },
-      },
-    },
-  },
-} as const
-export const SlidingDrawerStyles = StyleSheet.create(theme => ({
-  container: (colorPalette: PalettesWithNestedKeys) => ({
-    boxShadow: `0px -10px 20px black`,
-    borderRadius: theme.radii.lg,
-    backgroundColor: theme.colors.bg.default,
-    padding: theme.spacing[3],
-    variants: {
-      variant: {
-        solid: {},
-      },
-    },
-  }),
-  backdrop: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors.backdrop,
-  }),
-}))