react-native-varia 0.3.0 → 0.4.0

package/lib/patterns/newPatterns.tsx

@@ -1,285 +0,0 @@
-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}