react-native-varia 0.0.1 → 0.2.1

package/lib/components/Link.tsx

@@ -8,17 +8,16 @@ import {
 } from 'react-native'
 import Text from './Text'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import LinkStyles from '../theme/Link.recipe'
-import {TextSemanticSizes} from '../style/types'
-type LinkVariants = UnistylesVariants<typeof LinkStyles>
-
-type LinkProps = LinkVariants & {
+import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
+import {DefaultTextVariants, TextStyles} from '../theme/Text.recipe'
+type TextVariants = UnistylesVariants<typeof TextStyles>
+type LinkProps = TextVariants & {
+  colorPalette?: PalettesWithNestedKeys
   text: string
   url: string
   underline?: boolean
-  as?: TextSemanticSizes
   fontSize?: number
-  color?: string
+  color?: ThemeColors
   style?: StyleProp<ViewStyle>
   mixins?:
     | StyleProp<ViewStyle>
@@ -28,21 +27,16 @@ type LinkProps = LinkVariants & {
 }
 
 const Link = ({
-  colorPalette,
-  size,
+  colorPalette = 'accent',
+  variant,
+  size = DefaultTextVariants.size,
   text,
   url,
   underline,
-  as,
   fontSize,
   color,
   mixins,
 }: LinkProps) => {
-  LinkStyles.useVariants({
-    colorPalette,
-    size,
-  })
-
   return (
     <TouchableOpacity
       onPress={async () => {
@@ -53,19 +47,14 @@ const Link = ({
         }
       }}>
       <Text
-        as={as}
+        size={size}
+        variant={variant}
         fontSize={fontSize}
-        // color={color}
+        color={color}
+        colorPalette={colorPalette}
         style={
           [
-            styles.link(
-              underline ? 'underline' : 'none',
-              // linkTokens.variants,
-              // linkTokens.customVariants
-            ),
-            LinkStyles.link,
-            // style && styles.customStyle(style),
-            color && {color},
+            styles.link(underline ? 'underline' : 'none'),
             mixins && mixins,
           ] as any
         }>
@@ -79,9 +68,6 @@ const styles = StyleSheet.create({
   link: (underline): any => ({
     textDecorationLine: underline,
   }),
-  // customStyle: style => ({
-  //   ...style,
-  // }),
 })
 
 export default Link

package/lib/components/Modal.tsx

@@ -1,134 +1,173 @@
-import {TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native'
-import Animated, {FadeIn, FadeOut, Keyframe} from 'react-native-reanimated'
+import React, {createContext, useContext} from 'react'
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  StyleSheet as RNStyleSheet,
+} from 'react-native'
+import Animated from 'react-native-reanimated'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
 import Svg, {Path} from 'react-native-svg'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {Portal} from '@gorhom/portal'
 
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
+type AnimationKey = keyof typeof ModalTokens.animations.variants
+type ColorPaletteKey = PalettesWithNestedKeys
 
-type ModalProps = ModalVariants & {
+type ModalRootProps = ModalVariants & {
+  colorPalette?: ColorPaletteKey
+  animation: AnimationKey
+  portalHostName?: string
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   children: React.ReactNode
-  heading?: string
 }
 
-// Define animations outside of the component to avoid re-creation on each render
-const enteringModalContent = new Keyframe({
-  0: {opacity: 0, transform: [{scale: 0.8}]},
-  20: {opacity: 0.5, transform: [{scale: 0.9}]},
-  100: {opacity: 1, transform: [{scale: 1}]},
-}).duration(300)
+type ModalContextProps = Omit<ModalRootProps, 'children' | 'isOpen'>
 
-const exitingModalContent = new Keyframe({
-  0: {opacity: 1, transform: [{scale: 1}]},
-  100: {opacity: 0, transform: [{scale: 0.8}]},
-}).duration(200)
+const ModalContext = createContext<ModalContextProps | undefined>(undefined)
 
-const Modal = ({
+const useModalContext = () => {
+  const context = useContext(ModalContext)
+  if (context === undefined) {
+    throw new Error('Modal components must be rendered within Modal.Root')
+  }
+  return context
+}
+
+const ModalRoot = ({
+  colorPalette = 'accent',
+  variant = ModalTokens.defaultProps.variant,
+  animation,
+  portalHostName = 'modal',
   isOpen,
   setIsOpen,
-  heading,
   children,
-  colorPalette = ModalTokens.defaultProps.colorPalette,
-}: ModalProps) => {
-  // const tokens = useTokens('modal')();
-  if (!isOpen) return null
+}: ModalRootProps) => {
+  ModalStyles.useVariants({
+    variant,
+  })
 
-  // const resolvedColorScheme =
-  //   colorScheme ??
-  //   (tokens.defaultProps.colorScheme as keyof ModalColorSchemeVariants);
+  if (!isOpen) return null
 
-  ModalStyles.useVariants({
+  const contextValue: ModalContextProps = {
     colorPalette,
-  })
+    variant,
+    animation,
+    setIsOpen,
+  }
+
+  return (
+    <Portal hostName={portalHostName}>
+      <ModalContext.Provider value={contextValue}>
+        {children}
+      </ModalContext.Provider>
+    </Portal>
+  )
+}
+
+type ModalOverlayProps = {
+  children: React.ReactNode
+  variant?: ModalVariants['variant']
+  animation?: keyof typeof ModalTokens.animations.variants
+  colorPalette?: PalettesWithNestedKeys
+  customStyle?: any
+}
+
+const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
+  const context = useModalContext()
+  const {
+    colorPalette = 'accent',
+    variant,
+    animation,
+    setIsOpen,
+  } = {...context, ...props}
+
+  ModalStyles.useVariants({variant})
 
   return (
     <Animated.View
-      style={styles.overlay}
-      entering={FadeIn.duration(200)}
-      exiting={FadeOut.duration(250)}>
+      style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
+      entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
+      exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-        <View style={StyleSheet.absoluteFillObject} />
+        <View style={RNStyleSheet.absoluteFillObject} />
       </TouchableWithoutFeedback>
-      <Animated.View
-        // @ts-ignore
-        style={[styles.modalBox(), ModalStyles.container]}
-        entering={enteringModalContent}
-        exiting={exitingModalContent}>
-        <View style={styles.header(!heading)}>
-          <Text style={styles.headerTitle}>{!!heading && heading}</Text>
-          <View
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}>
-            <CloseButton onClose={() => setIsOpen(false)} />
-          </View>
-        </View>
-        <View style={styles.content}>{children}</View>
-      </Animated.View>
+      {children}
     </Animated.View>
   )
 }
 
-// type ModalTokenType = ReturnType<Tokens['modal']>;
-// type VariantsType = ModalTokenType['variants'];
+type ModalContentProps = Omit<ModalVariants, 'variant'> & {
+  children: React.ReactNode
+  variant?: ModalVariants['variant']
+  animation?: keyof typeof ModalTokens.animations.variants
+  colorPalette?: PalettesWithNestedKeys
+  customStyle?: any
+}
 
-const styles = StyleSheet.create(theme => {
-  return {
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: 'black',
-      zIndex: 1000,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    modalBox: () => ({
-      width: '80%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: 20,
-      borderRadius: 10,
-      // backgroundColor: theme.colors.background,
-      // boxShadow: '0px 0px 50px rgba(250, 250, 250, 0.6)',
-      // variants: {
-      //   colorScheme: variants.colorScheme as any,
-      // },
-    }),
-    header: padding => ({
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      width: '100%',
-      marginBottom: 10,
-      padding: padding && 10,
-    }),
-    headerTitle: {
-      textAlign: 'center',
-      flex: 1,
-    },
-    closeButton: {
-      color: 'white',
-    },
-    content: {
-      width: '100%',
-    },
+const ModalContent = ({children, ...props}: ModalContentProps) => {
+  const context = useModalContext()
+  const {
+    colorPalette = 'accent',
+    variant,
+    animation,
+  } = {
+    ...context,
+    ...props,
   }
-})
 
-export default Modal
+  ModalStyles.useVariants({variant})
 
-export interface CloseButtonProps {
+  return (
+    <Animated.View
+      style={[styles.content(), ModalStyles.content(colorPalette)]}
+      entering={ModalTokens.animations.variants[animation]?.enteringContent}
+      exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
+      {children}
+    </Animated.View>
+  )
+}
+
+const ModalHeader = ({children}: {children: React.ReactNode}) => {
+  return <View style={styles.header}>{children}</View>
+}
+
+const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
+  const context = useModalContext()
+  const {variant, colorPalette = 'accent'} = {...context, ...props}
+
+  ModalStyles.useVariants({variant})
+  return <Text style={ModalStyles.title(colorPalette)}>{children}</Text>
+}
+
+type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
+  children: React.ReactNode
+  variant?: ModalVariants['variant']
+  colorPalette?: PalettesWithNestedKeys
+  customStyle?: any
+}
+
+const ModalBody = ({children, ...props}: ModalBodyProps) => {
+  const context = useModalContext()
+  const {colorPalette = 'accent', variant} = {
+    ...context,
+    ...props,
+  }
+
+  ModalStyles.useVariants({variant})
+  return <View>{children}</View>
+}
+
+type CloseButtonProps = {
   scale?: number
-  color?: undefined
+  color?: string
   onClose: () => void
 }
 
-const defaultColor = 'white'
-
 const CloseButton = ({
   onClose,
   scale = 1,
@@ -137,8 +176,7 @@ const CloseButton = ({
 }: CloseButtonProps) => (
   <TouchableOpacity onPress={onClose}>
     <Svg
-      // TODO: fix types
-      //@ts-ignore
+      // @ts-ignore
       xmlns="http://www.w3.org/2000/svg"
       width={scale * 24}
       height={scale * 24}
@@ -146,7 +184,7 @@ const CloseButton = ({
       fill="none"
       {...rest}>
       <Path
-        stroke={color || defaultColor}
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth={1.5}
@@ -155,3 +193,65 @@ const CloseButton = ({
     </Svg>
   </TouchableOpacity>
 )
+
+type ModalCloseTriggerProps = {
+  children: (params: {onClose: () => void}) => React.ReactNode
+  style?: any
+}
+
+const ModalCloseTrigger = ({children, style}: ModalCloseTriggerProps) => {
+  const {setIsOpen} = useModalContext()
+
+  const onClose = () => setIsOpen(false)
+
+  return (
+    <View
+      style={[
+        {
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        },
+        style,
+      ]}>
+      {children({onClose})}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create(theme => {
+  return {
+    overlay: {
+      ...RNStyleSheet.absoluteFillObject,
+      zIndex: 1000,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    content: () => ({
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+    }),
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: 10,
+    },
+    closeButton: {
+      color: 'white',
+    },
+  }
+})
+
+export const Modal = Object.assign(ModalRoot, {
+  Root: ModalRoot,
+  Overlay: ModalOverlay,
+  Content: ModalContent,
+  Header: ModalHeader,
+  Title: ModalTitle,
+  Body: ModalBody,
+  CloseTrigger: ModalCloseTrigger,
+  CloseButton: CloseButton,
+})

package/lib/components/NewSelect.tsx

@@ -0,0 +1,202 @@
+import React, {createContext, useContext, useState, ReactNode} from 'react'
+import {
+  View,
+  // Text,
+  TouchableOpacity,
+  ScrollView,
+  TouchableWithoutFeedback,
+  StyleSheet,
+} from 'react-native'
+import Text from './Text'
+import {StyleSheet as UniStyleSheet} from 'react-native-unistyles'
+import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {UnistylesVariants} from 'react-native-unistyles'
+import {Portal} from '@gorhom/portal'
+
+type SelectVariants = UnistylesVariants<typeof SelectStyles>
+
+interface Option {
+  label: string
+  value: string
+}
+
+interface SelectContextType {
+  value: string
+  setValue: (val: string) => void
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  options: Option[]
+  colorPalette: PalettesWithNestedKeys
+  variant: SelectVariants['variant']
+  size: SelectVariants['size']
+}
+
+const SelectContext = createContext<SelectContextType | undefined>(undefined)
+
+const useSelect = () => {
+  const context = useContext(SelectContext)
+  if (!context)
+    throw new Error('Select subcomponent must be used within Select.Root')
+  return context
+}
+
+type RootProps = SelectVariants & {
+  options: Option[]
+  value?: string
+  onChange?: (val: string) => void
+  defaultValue?: string
+  placeholder?: string
+  colorPalette?: PalettesWithNestedKeys
+  flex?: number
+  children: ReactNode
+  portalHostName?: string
+}
+
+export const Select = {
+  Root: ({
+    options,
+    value: propValue,
+    onChange: propOnChange,
+    defaultValue = '',
+    placeholder = 'Selecciona una opción',
+    variant = SelectDefaultVariants.variant,
+    size = SelectDefaultVariants.size,
+    colorPalette = 'accent',
+    flex = 1,
+    children,
+    portalHostName = 'select',
+  }: RootProps) => {
+    SelectStyles.useVariants({variant, size})
+
+    const [internalValue, setInternalValue] = useState<string>(defaultValue)
+    const [isOpen, setIsOpen] = useState(false)
+    const isControlled = propValue !== undefined && propOnChange !== undefined
+    const value = isControlled ? propValue! : internalValue
+
+    const setValue = (val: string) => {
+      if (isControlled) propOnChange!(val)
+      else setInternalValue(val)
+      setIsOpen(false)
+    }
+
+    return (
+      <SelectContext.Provider
+        value={{
+          value,
+          setValue,
+          isOpen,
+          setIsOpen,
+          options,
+          colorPalette,
+          variant,
+          size,
+        }}>
+        <View style={[styles.container(flex)]}>{children}</View>
+
+        {isOpen && (
+          <Portal hostName={portalHostName}>
+            <View style={styles.modalOverlay}>
+              <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+                <View style={styles.backdrop} />
+              </TouchableWithoutFeedback>
+              <View
+                style={[
+                  styles.modalContent,
+                  SelectStyles.ModalContainer(colorPalette),
+                ]}>
+                <ScrollView
+                  contentContainerStyle={SelectStyles.itemsContainer(
+                    colorPalette,
+                  )}>
+                  {options.map(opt => (
+                    <TouchableOpacity
+                      key={opt.value}
+                      onPress={() => setValue(opt.value)}>
+                      <View
+                        style={[
+                          styles.item,
+                          SelectStyles.item(colorPalette, value === opt.value),
+                        ]}>
+                        <Text
+                          style={SelectStyles.itemText(
+                            colorPalette,
+                            value === opt.value,
+                          )}>
+                          {opt.label}
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
+              </View>
+            </View>
+          </Portal>
+        )}
+      </SelectContext.Provider>
+    )
+  },
+
+  Trigger: ({placeholder = 'Selecciona una opción'}) => {
+    const {
+      variant,
+      size,
+      value,
+      setIsOpen,
+      options,
+      colorPalette = 'accent',
+    } = useSelect()
+    SelectStyles.useVariants({variant, size})
+    const selectedOption = options.find(opt => opt.value === value)
+
+    return (
+      <TouchableWithoutFeedback onPress={() => setIsOpen(true)}>
+        <View style={[styles.input, SelectStyles.input(colorPalette)]}>
+          <Text style={SelectStyles.valueText(colorPalette, !!selectedOption)}>
+            {selectedOption ? selectedOption.label : placeholder}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  },
+}
+
+const styles = UniStyleSheet.create({
+  container: (flex: number) => ({
+    flexGrow: flex,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  }),
+  input: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  item: {
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  modalOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  modalContent: {
+    maxHeight: '50%',
+    width: '80%',
+    backgroundColor: 'white',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+})