react-native-varia 0.3.0 → 0.4.0

package/lib/patterns/index.tsx

@@ -1,102 +1,331 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {Children, useLayoutEffect, useRef, useState} from 'react'
 import type {ReactNode} from 'react'
 import {ScrollView, View} from 'react-native'
 import type {StyleProp, ViewProps, ViewStyle} from 'react-native'
+import Animated, {AnimatedRef} from 'react-native-reanimated'
 import {StyleSheet, UnistylesRuntime} from 'react-native-unistyles'
 
-type SpacingValue = number | string
-
-export interface SpacingProps {
-  m?: SpacingValue
-  mt?: SpacingValue
-  mb?: SpacingValue
-  ml?: SpacingValue
-  mr?: SpacingValue
-  mx?: SpacingValue
-  my?: SpacingValue
-  p?: SpacingValue
-  pt?: SpacingValue
-  pb?: SpacingValue
-  pl?: SpacingValue
-  pr?: SpacingValue
-  px?: SpacingValue
-  py?: SpacingValue
-
+interface StackProps {
+  backgroundColor?: ViewStyle['backgroundColor']
+  bg?: ViewStyle['backgroundColor']
+  width?: ViewStyle['width']
+  w?: ViewStyle['width']
+  minWidth?: ViewStyle['width']
+  maxWidth?: ViewStyle['width']
+  height?: ViewStyle['height']
+  h?: ViewStyle['height']
+  minHeight?: ViewStyle['height']
+  maxHeight?: 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'
 }
 
-type LayoutProps = {
-  center?: boolean
-  vCenter?: boolean
-  hCenter?: boolean
-  flex?: number
-  gap?: number
+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
 }
 
-export type HStackProps = SpacingProps &
-  LayoutProps &
-  Omit<React.ComponentProps<'View'>, keyof SpacingProps | keyof LayoutProps>
+const VStack = ({children, style, align, ...props}: StackProps) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
 
-export type HstackProps = {
-  children?: ReactNode
-  style?: StyleProp<ViewStyle>
-  center?: boolean
-  vCenter?: boolean
-  hCenter?: boolean
-  flex?: number
-  gap?: number
-  stretch?: boolean
-} & ViewProps
+  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])
 
-const HStack: React.FC<HstackProps> = ({
-  children,
-  style,
-  center,
-  vCenter,
-  hCenter,
-  flex = 0,
-  gap = 0,
-  stretch,
-  ...props
-}) => {
   return (
-    <View
-      style={[
-        styles.hStack(center, vCenter, hCenter, gap, flex, stretch),
-        style,
-      ]}
-      {...props}>
+    <View style={[stackStyles.stack, stackStyles.hstack, styleArr, style]}>
       {children}
     </View>
   )
 }
-const VStack: React.FC<HstackProps> = ({
+const AnimatedView = Animated.createAnimatedComponent(View)
+
+const AnimatedHStack = ({
   children,
   style,
-  center,
-  vCenter,
-  hCenter,
-  flex = 0,
-  gap = 0,
-  stretch,
+  align,
+  ref,
   ...props
+}: StackProps & {
+  ref?: AnimatedRef<Animated.View>
 }) => {
+  stackStyles.useVariants({align})
+  const styleArr = useMemo(() => mapProps(props), [props])
+
   return (
-    <View
-      style={[
-        styles.vStack(center, vCenter, hCenter, gap, flex, stretch),
-        style,
-      ]}
-      {...props}>
+    <AnimatedView
+      ref={ref && ref}
+      style={[stackStyles.stack, stackStyles.vstack, styleArr, style]}>
       {children}
-    </View>
+    </AnimatedView>
   )
 }
 
+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,
+  }),
+  minWidth: value => ({
+    minWidth: value,
+  }),
+  maxWidth: value => ({
+    maxWidth: value,
+  }),
+  height: value => ({
+    height: value,
+  }),
+  h: value => ({
+    height: value,
+  }),
+  minHeight: value => ({
+    minHeight: value,
+  }),
+  maxHeight: value => ({
+    maxHeight: 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, AnimatedHStack}
+
 export const VSpacer = ({size}: {size?: number}) => {
   return (
     <View
@@ -126,26 +355,6 @@ export const FlexSpacer = () => {
     />
   )
 }
-const styles = StyleSheet.create(() => ({
-  hStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
-    flex,
-    gap,
-    flexDirection: 'row',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
-    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
-    ...(stretch ? {alignSelf: 'stretch'} : {}),
-  }),
-  vStack: (center, vCenter, hCenter, gap, flex, stretch) => ({
-    flex,
-    gap,
-    flexDirection: 'column',
-    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
-    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
-    ...(stretch ? {alignSelf: 'stretch'} : {}),
-  }),
-}))
-
-export {HStack, VStack}
 
 export const gap = (size: number) => ({
   gap: size,

package/lib/theme/Accordion.tsx

@@ -0,0 +1,184 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const AccordionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+export const AccordionStyles = StyleSheet.create(theme => ({
+  itemContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: 12,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+          borderColor: 'transparent',
+          borderWidth: 1,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+          borderWidth: 0,
+        },
+      },
+      size: {
+        sm: {
+          minHeight: theme.sizes[9],
+          paddingHorizontal: theme.sizes['3.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        md: {
+          minHeight: theme.sizes[10],
+          paddingHorizontal: theme.sizes[4],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        lg: {
+          minHeight: theme.sizes[11],
+          paddingHorizontal: theme.sizes['4.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        xl: {
+          minHeight: theme.sizes[12],
+          paddingHorizontal: theme.sizes[5],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing['2.5'],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          borderColor: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        disabled: true,
+        styles: {},
+      },
+      {
+        variant: 'ghost',
+        disabled: true,
+        styles: {
+          backgroundColor: 'transparent',
+        },
+      },
+      {
+        variant: 'subtle',
+        disabled: true,
+        styles: {
+          backgroundColor: theme.colors.bg.disabled,
+        },
+      },
+    ],
+  }),
+  header: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+        },
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[9],
+        },
+        md: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[10],
+        },
+        lg: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[11],
+        },
+        xl: {
+          paddingHorizontal: theme.spacing[3],
+          height: theme.sizes[12],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+  headerTitle: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: theme.fontSizes.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.md,
+        },
+        xl: {
+          fontSize: theme.fontSizes.lg,
+        },
+        nosize: {
+          fontSize: theme.fontSizes.md,
+        },
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          color: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        active: true,
+        styles: {},
+      },
+      {
+        variant: 'subtle',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+}))

package/lib/theme/Button.recipe.tsx

@@ -9,7 +9,9 @@ export const ButtonDefaultVariants = {
 export const ButtonStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
-
+    _web: {
+      _classNames: 'button-container-recipe',
+    },
     variants: {
       variant: {
         solid: {
@@ -107,6 +109,9 @@ export const ButtonStyles = StyleSheet.create(theme => ({
     ],
   }),
   text: (colorPalette: PalettesWithNestedKeys) => ({
+    _web: {
+      _classNames: 'button-text-recipe',
+    },
     variants: {
       variant: {
         solid: {
@@ -131,22 +136,34 @@ export const ButtonStyles = StyleSheet.create(theme => ({
       },
       size: {
         xs: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
+          lineHeight: 12,
         },
         sm: {
-          ...textStyle.sm,
+          // ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
+          lineHeight: 20,
         },
         md: {
-          ...textStyle.sm,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         lg: {
-          ...textStyle.md,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         xl: {
-          ...textStyle.md,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         '2xl': {
-          ...textStyle.lg,
+          // ...textStyle.lg,
+          fontSize: theme.fontSizes.lg,
+          lineHeight: 28,
         },
       },
     },

package/lib/theme/Drawer.recipe.tsx

@@ -49,15 +49,13 @@ export const DrawerStyles = StyleSheet.create((theme, rt) => ({
     },
   },
   slider: (colorPalette: PalettesWithNestedKeys) => ({
-    boxShadow: `0px -10px 20px black`,
+    boxShadow: theme.shadows.sm,
     borderRadius: theme.radii.lg,
     backgroundColor: theme.colors.bg.default,
     padding: theme.spacing[3],
     variants: {
       variant: {
-        solid: {
-          backgroundColor: 'blue',
-        },
+        solid: {},
         subtle: {
           boxShadow: 'none',
           borderRadius: theme.radii.none,