react-native-varia 0.2.4 → 0.3.0

package/lib/patterns/newPatterns.tsx

@@ -0,0 +1,285 @@
+import {useMemo} from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
+
+interface StackProps {
+  backgroundColor?: ViewStyle['backgroundColor']
+  bg?: ViewStyle['backgroundColor']
+  width?: ViewStyle['width']
+  w?: ViewStyle['width']
+  height?: ViewStyle['height']
+  h?: ViewStyle['height']
+  borderColor?: ViewStyle['borderColor']
+  borderWidth?: ViewStyle['borderWidth']
+  borderStyle?: ViewStyle['borderStyle']
+  borderRadius?: ViewStyle['borderRadius']
+  br?: ViewStyle['borderRadius']
+  alignSelf?: ViewStyle['alignSelf']
+  alignItems?: ViewStyle['alignItems']
+  justifyContent?: ViewStyle['justifyContent']
+  flex?: ViewStyle['flex']
+  flexShrink?: ViewStyle['flexShrink']
+  flexGrow?: ViewStyle['flexGrow']
+  flexBasis?: ViewStyle['flexBasis']
+  flexWrap?: ViewStyle['flexWrap']
+  gap?: ViewStyle['gap']
+  m?: ViewStyle['margin']
+  mt?: ViewStyle['marginTop']
+  mb?: ViewStyle['marginBottom']
+  ml?: ViewStyle['marginLeft']
+  mr?: ViewStyle['marginRight']
+  mx?: ViewStyle['marginHorizontal']
+  my?: ViewStyle['marginVertical']
+  margin?: ViewStyle['margin']
+  marginVertical?: ViewStyle['marginVertical']
+  marginHorizontal?: ViewStyle['marginHorizontal']
+  marginTop?: ViewStyle['marginTop']
+  marginBottom?: ViewStyle['marginBottom']
+  marginLeft?: ViewStyle['marginLeft']
+  marginRight?: ViewStyle['marginRight']
+  p?: ViewStyle['padding']
+  pt?: ViewStyle['paddingVertical']
+  pb?: ViewStyle['paddingVertical']
+  pl?: ViewStyle['paddingLeft']
+  pr?: ViewStyle['paddingRight']
+  px?: ViewStyle['paddingHorizontal']
+  py?: ViewStyle['paddingVertical']
+  padding?: ViewStyle['padding']
+  paddingVertical?: ViewStyle['paddingVertical']
+  paddingHorizontal?: ViewStyle['paddingHorizontal']
+  paddingTop?: ViewStyle['paddingTop']
+  paddingBottom?: ViewStyle['paddingBottom']
+  paddingLeft?: ViewStyle['paddingLeft']
+  paddingRight?: ViewStyle['paddingRight']
+  children?: React.ReactNode
+  // style?: ViewStyle
+  style?: StyleProp<ViewStyle>
+  align?: 'center' | 'vCenter' | 'hCenter'
+}
+
+function mapProps(props: StackProps) {
+  const stylesArr: any[] = []
+
+  Object.entries(props).forEach(([key, value]) => {
+    if (value == null) return
+
+    const fn = (stackStyles as any)[key]
+    if (typeof fn === 'function') {
+      stylesArr.push(fn(value))
+    }
+  })
+
+  return stylesArr
+}
+
+const VStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
+  return (
+    <View style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
+      {children}
+    </View>
+  )
+}
+
+const HStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
+  return (
+    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
+      {children}
+    </View>
+  )
+}
+
+const stackStyles = StyleSheet.create({
+  stack: {},
+  vstack: {
+    flexDirection: 'column',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          justifyContent: 'center',
+        },
+        hCenter: {
+          alignItems: 'center',
+        },
+      },
+    },
+  },
+  hstack: {
+    flexDirection: 'row',
+    variants: {
+      align: {
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        vCenter: {
+          alignItems: 'center',
+        },
+        hCenter: {
+          justifyContent: 'center',
+        },
+      },
+    },
+  },
+
+  backgroundColor: value => ({
+    backgroundColor: value,
+  }),
+  bg: value => ({
+    backgroundColor: value,
+  }),
+
+  width: value => ({
+    width: value,
+  }),
+  w: value => ({
+    width: value,
+  }),
+  height: value => ({
+    height: value,
+  }),
+  h: value => ({
+    height: value,
+  }),
+
+  borderColor: value => ({
+    borderColor: value,
+  }),
+  borderWidth: value => ({
+    borderWidth: value,
+  }),
+  borderStyle: value => ({
+    borderStyle: value,
+  }),
+  borderRadius: value => ({
+    borderRadius: value,
+  }),
+  br: value => ({
+    borderRadius: value,
+  }),
+
+  flex: value => ({
+    flex: value,
+  }),
+  flexShrink: value => ({
+    flexShrink: value,
+  }),
+  flexGrow: value => ({
+    flexGrow: value,
+  }),
+  flexBasis: value => ({
+    flexBasis: value,
+  }),
+  flexWrap: value => ({
+    flexWrap: value,
+  }),
+  alignSelf: value => ({
+    alignSelf: value,
+  }),
+  alignItems: value => ({
+    alignItems: value,
+  }),
+  justifyContent: value => ({
+    justifyContent: value,
+  }),
+  gap: value => ({
+    gap: value,
+  }),
+
+  m: value => ({
+    margin: value,
+  }),
+  mt: value => ({
+    marginTop: value,
+  }),
+  mb: value => ({
+    marginBottom: value,
+  }),
+  ml: value => ({
+    marginLeft: value,
+  }),
+  mr: value => ({
+    marginRight: value,
+  }),
+  mx: value => ({
+    marginHorizontal: value,
+  }),
+  my: value => ({
+    marginVertical: value,
+  }),
+  margin: value => ({
+    margin: value,
+  }),
+  marginVertical: value => ({
+    marginVertical: value,
+  }),
+  marginHorizontal: value => ({
+    marginHorizontal: value,
+  }),
+  marginLeft: value => ({
+    marginLeft: value,
+  }),
+  marginRight: value => ({
+    marginRight: value,
+  }),
+  marginTop: value => ({
+    marginTop: value,
+  }),
+  marginBottom: value => ({
+    marginBottom: value,
+  }),
+
+  p: value => ({
+    padding: value,
+  }),
+  pt: value => ({
+    paddingTop: value,
+  }),
+  pb: value => ({
+    paddingBottom: value,
+  }),
+  pl: value => ({
+    paddingLeft: value,
+  }),
+  pr: value => ({
+    paddingRight: value,
+  }),
+  px: value => ({
+    paddingHorizontal: value,
+  }),
+  py: value => ({
+    paddingVertical: value,
+  }),
+  padding: value => ({
+    padding: value,
+  }),
+  paddingHorizontal: value => ({
+    paddingHorizontal: value,
+  }),
+  paddingVertical: value => ({
+    paddingVertical: value,
+  }),
+  paddingLeft: value => ({
+    paddingLeft: value,
+  }),
+  paddingRight: value => ({
+    paddingRight: value,
+  }),
+  paddingTop: value => ({
+    paddingTop: value,
+  }),
+  paddingBottom: value => ({
+    paddingBottom: value,
+  }),
+})
+
+export {VStack, HStack}

package/lib/theme/{SlidingDrawer.recipe.tsx → Drawer.recipe.tsx}

@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native-unistyles'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
-export const SlidingDrawerTokens = {
+export const DrawerTokens = {
   defaultProps: {
     variant: 'solid',
     animation: 'defaultSpring',
@@ -35,7 +35,7 @@ export const SlidingDrawerTokens = {
     },
   },
 } as const
-export const SlidingDrawerStyles = StyleSheet.create((theme, rt) => ({
+export const DrawerStyles = StyleSheet.create((theme, rt) => ({
   positioner: {
     variants: {
       variant: {

package/lib/theme/Slider.recipe.tsx

@@ -1,5 +1,4 @@
 import {StyleSheet} from 'react-native-unistyles'
-import {hexToRgba} from '../style/varia/utils'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
 export const SliderDefaultVariants = {
@@ -73,6 +72,13 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[10],
         },
       },
+      {
+        axis: 'x',
+        size: 'flex',
+        styles: {
+          minHeight: 50,
+        },
+      },
       {
         axis: 'y',
         size: 'xs',
@@ -108,6 +114,13 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[10],
         },
       },
+      {
+        axis: 'y',
+        size: 'flex',
+        styles: {
+          minWidth: 50,
+        },
+      },
     ],
   }),
   maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
@@ -177,6 +190,11 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[10],
         },
       },
+      {
+        axis: 'x',
+        size: 'flex',
+        styles: {},
+      },
       {
         axis: 'y',
         size: 'xs',
@@ -218,10 +236,11 @@ export const SliderStyles = StyleSheet.create(theme => ({
     colorPalette: PalettesWithNestedKeys,
     opacityTrack: boolean,
   ) => ({
-    backgroundColor: opacityTrack
-      ? hexToRgba(theme.colors[colorPalette].default, 0.5)
-      : theme.colors[colorPalette].default,
-    height: theme.sizes[5],
+    backgroundColor: theme.colors[colorPalette].default,
+    // opacityTrack
+    //   ? hexToRgba(theme.colors[colorPalette].default, 0.5)
+    //   : theme.colors[colorPalette].default,
+    // height: theme.sizes[5],
     variants: {
       axis: {
         x: {},
@@ -246,6 +265,7 @@ export const SliderStyles = StyleSheet.create(theme => ({
         xl: {
           // height: theme.sizes[10],
         },
+        flex: {},
       },
     },
     compoundVariants: [
@@ -284,6 +304,11 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: theme.sizes[10],
         },
       },
+      {
+        axis: 'x',
+        size: 'flex',
+        styles: {},
+      },
       {
         axis: 'y',
         size: 'xs',
@@ -409,7 +434,9 @@ export const SliderStyles = StyleSheet.create(theme => ({
         size: 'flex',
         styles: {
           width: 30,
-          height: 50,
+          // height: 50,
+          // alignSel: 'stretch',
+          // flex: 1,
         },
       },
       {
@@ -456,7 +483,7 @@ export const SliderStyles = StyleSheet.create(theme => ({
         axis: 'y',
         size: 'flex',
         styles: {
-          width: 50,
+          alignSelf: 'stretch',
           height: 30,
         },
       },
@@ -465,7 +492,7 @@ export const SliderStyles = StyleSheet.create(theme => ({
   step: (colorPalette: PalettesWithNestedKeys) => ({
     // TODO: type correctly theme.colors
     // @ts-ignore
-    backgroundColor: theme.colors.white['0'],
+    backgroundColor: theme.colors.bg.default,
     variants: {
       axis: {
         x: {},
@@ -480,6 +507,10 @@ export const SliderStyles = StyleSheet.create(theme => ({
         md: {},
         lg: {},
         xl: {},
+        flex: {
+          width: 5,
+          height: 5,
+        },
       },
     },
   }),

package/lib/varia/mixins.ts

@@ -18,9 +18,6 @@ const mixins = StyleSheet.create((theme, rt) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  sx: (sx: any) => ({
-    ...sx,
-  }),
   w: (width: number) => ({
     width,
   }),
@@ -181,7 +178,6 @@ export const {
   row,
   gap,
   center,
-  sx,
   flexColumn,
   w,
   h,

package/lib/varia/types.ts

@@ -1,3 +1,4 @@
+import {ViewStyle} from 'react-native'
 import {darkTheme, lightTheme} from '../themes'
 
 export interface AlphaPalette {
@@ -275,3 +276,10 @@ export function createCircleProgressTokens<
 }) {
   return tokens
 }
+
+export type AlignSelf = ViewStyle['alignSelf']
+export type StackDirection = 'row' | 'column'
+export type progressDirection = 'forward' | 'reverse'
+export type rotationDirection = 'clockwise' | 'counterclockwise'
+export type Flex = ViewStyle['flex']
+export type MaxWidth = ViewStyle['maxWidth']

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.4",
+  "version": "0.3.0",
   "bin": {
     "varia": "bin/cli.js"
   },