react-native-varia 0.2.1 → 0.2.3

package/lib/components/NewSelect.tsx

@@ -1,202 +0,0 @@
-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',
-  },
-})

package/lib/components/SelectOld.tsx

@@ -1,153 +0,0 @@
-import React, {useState} from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  TouchableWithoutFeedback,
-} from 'react-native'
-import {StyleSheet} from 'react-native-unistyles'
-import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {UnistylesVariants} from 'react-native-unistyles'
-import {Modal} from './Modal'
-
-type SelectVariants = UnistylesVariants<typeof SelectStyles>
-
-interface Option {
-  label: string
-  value: string
-}
-
-type SelectProps = SelectVariants & {
-  options: Option[]
-  value?: string
-  onChange?: (value: string) => void
-  onBlur?: () => void
-  defaultValue?: string
-  placeholder?: string
-  colorPalette?: PalettesWithNestedKeys
-  flex?: number
-}
-
-export const Select = ({
-  options,
-  value: propValue,
-  onChange: propOnChange,
-  onBlur: propOnBlur,
-  defaultValue = '',
-  placeholder = 'Selecciona una opción',
-  variant = SelectDefaultVariants.variant,
-  size = SelectDefaultVariants.size,
-  colorPalette = 'accent',
-  flex = 1,
-}: SelectProps) => {
-  SelectStyles.useVariants({
-    variant,
-    size,
-  })
-
-  const [isOpen, setIsOpen] = useState(false)
-  const [internalValue, setInternalValue] = useState<string>(defaultValue)
-
-  const isControlled = propValue !== undefined && propOnChange !== undefined
-
-  const value = isControlled ? propValue! : internalValue
-
-  const handleSelect = (val: string) => {
-    if (isControlled) {
-      propOnChange!(val)
-    } else {
-      setInternalValue(val)
-    }
-    setIsOpen(false)
-  }
-
-  const selectedOption = options.find(opt => opt.value === value)
-
-  return (
-    <>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          setIsOpen(true)
-          propOnBlur?.()
-        }}>
-        <View
-          style={[
-            styles.container(flex),
-            SelectStyles.container(colorPalette),
-          ]}>
-          <View style={[styles.input, SelectStyles.input(colorPalette)]}>
-            <Text
-              style={[SelectStyles.valueText(colorPalette, !!selectedOption)]}>
-              {selectedOption ? selectedOption.label : placeholder}
-            </Text>
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-
-      {/* Modal con lista de opciones */}
-      <Modal.Root
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        colorPalette={colorPalette}
-        variant="outline"
-        portalHostName="select">
-        <Modal.Overlay variant={'outline'} customStyle={SelectStyles}>
-          <Modal.Content>
-            <Modal.Body>
-              <ScrollView
-                style={[SelectStyles.ModalContainer(colorPalette)]}
-                contentContainerStyle={[
-                  SelectStyles.itemsContainer(colorPalette),
-                ]}>
-                {options.map(item => (
-                  <TouchableOpacity
-                    key={item.value}
-                    onPress={() => handleSelect(item.value)}>
-                    <View
-                      style={[
-                        styles.item,
-                        SelectStyles.item(
-                          colorPalette,
-                          selectedOption?.value === item.value,
-                        ),
-                      ]}>
-                      <Text
-                        style={SelectStyles.itemText(
-                          colorPalette,
-                          selectedOption?.value === item.value,
-                        )}>
-                        {item.label}
-                      </Text>
-                    </View>
-                  </TouchableOpacity>
-                ))}
-              </ScrollView>
-            </Modal.Body>
-          </Modal.Content>
-        </Modal.Overlay>
-      </Modal.Root>
-    </>
-  )
-}
-
-const styles = StyleSheet.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',
-  },
-})

package/lib/components/Switchold.tsx

@@ -1,174 +0,0 @@
-import {TouchableWithoutFeedback} from 'react-native'
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
-import {useLayoutEffect, useRef, useState} from 'react'
-import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-const animations = {
-  withSpring,
-  withTiming,
-}
-
-type AnimationType = 'withSpring' | 'withTiming'
-
-type SwitchVariants = UnistylesVariants<typeof SwitchStyles>
-
-type SwitchProps = SwitchVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  value?: boolean
-  animation?: keyof typeof SwitchTokens.variants.animation
-  onValueChange?: (value: boolean) => void
-  flex?: number
-}
-
-const Switch = ({
-  colorPalette = 'accent',
-  value,
-  animation = SwitchTokens.defaultProps.animation,
-  onValueChange = () => {},
-  variant = SwitchTokens.defaultProps.variant,
-  size = SwitchTokens.defaultProps.size,
-  flex = 1,
-}: SwitchProps) => {
-  const animatedRef = useRef(null)
-
-  SwitchStyles.useVariants({
-    variant,
-    size,
-    enabled: value,
-  })
-
-  const animationVariant =
-    SwitchTokens.variants?.animation && animation
-      ? SwitchTokens.variants.animation[animation]
-      : {
-          type: 'withSpring' as AnimationType,
-          props: {
-            damping: 15,
-            stiffness: 100,
-            mass: 1,
-          },
-        }
-  console.log('🚀 ~ animationVariant:', animationVariant)
-
-  const color = useAnimatedVariantColor(
-    SwitchStyles.container(colorPalette),
-    'backgroundColor',
-  )
-  const thumbColor = useAnimatedVariantColor(
-    SwitchStyles.thumb(colorPalette),
-    'backgroundColor',
-  )
-  const thumbEnabledPosition = useSharedValue(0)
-  const animatedValue = useSharedValue(0)
-  const containerWidth = useSharedValue(0)
-
-  useLayoutEffect(() => {
-    //@ts-ignore
-    animatedRef.current?.measure((x, y, width) => {
-      containerWidth.value = width
-      //@ts-ignore
-      const thumbWidth = SwitchStyles.thumb(colorPalette).width
-      //@ts-ignore
-      const padding = SwitchStyles.container(colorPalette).padding || 0
-      const trackBorderWidth =
-        //@ts-ignore
-        SwitchStyles.container(colorPalette).borderWidth || 0
-      thumbEnabledPosition.value =
-        width - thumbWidth - trackBorderWidth * 2 - padding * 2
-    })
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: animations[animationVariant.type](
-        color.value,
-        animationVariant.props,
-      ),
-      // backgroundColor: withTiming(color.value, {
-      //   duration: 100,
-      //   easing: Easing.ease,
-      // }),
-    }
-  })
-  const thumbAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: animations[animationVariant.type](
-        thumbColor.value,
-        animationVariant.props,
-      ),
-      // backgroundColor: withTiming(thumbColor.value, {
-      //   duration: 100,
-      //   easing: Easing.ease,
-      // }),
-    }
-  })
-
-  const circleTranslationStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateX: animatedValue.value,
-        },
-      ],
-    }
-  })
-
-  return (
-    <TouchableWithoutFeedback
-      onPress={() => {
-        onValueChange(!value)
-        animatedValue.value = animations[animationVariant.type](
-          animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
-          animationVariant.props,
-        )
-        // animatedValue.value = withTiming(
-        //   animatedValue.value === 0 ? thumbEnabledPosition.value : 0,
-        //   {duration: 100, easing: Easing.ease},
-        // )
-      }}>
-      <Animated.View
-        ref={animatedRef}
-        style={[
-          styles.container(flex),
-          animatedStyle,
-          SwitchStyles.container(colorPalette),
-        ]}>
-        <Animated.View
-          style={[
-            styles.thumb,
-            SwitchStyles.thumb(colorPalette),
-            thumbAnimatedStyle,
-            circleTranslationStyle,
-          ]}
-        />
-      </Animated.View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-export default Switch
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: (flex: number) => ({
-    // flex,
-    flexGrow: flex,
-    flexShrink: 0,
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: 0,
-    borderRadius: 20,
-  }),
-  thumb: {
-    borderRadius: 9999,
-  },
-}))

package/lib/components/index.tsx

@@ -1,83 +0,0 @@
-import { StyleSheet, UnistylesVariants } from "react-native-unistyles"
-import ButtonRaw from "./Button-old"
-import ButtonStyles from "../theme/Button.recipe-old"
-
-// const ButtonStyles = StyleSheet.create(theme => ({
-//   container: {
-//     variants: {
-//       colorPalette: {
-//         primary: {
-//           backgroundColor: 'tomato',
-//         },
-//         secondary: {
-//           backgroundColor: theme.colors.foreground2,
-//         }
-//       },
-//       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,
-//         }
-//       }
-//     }
-//   }
-// }))
-
-type ButtonVariants = UnistylesVariants<typeof ButtonStyles>;
-
-type ButtonProps = ButtonVariants & {
-  onPress: () => void;
-};
-
-export const Button = ({ size, colorPalette, ...props }: ButtonProps) => {
-  return (
-    <ButtonRaw
-      buttonStyles={ButtonStyles}
-      size={size}
-      colorPalette={colorPalette}
-      {...props}
-    />
-  );
-};

package/lib/components/layoutTest.tsx

@@ -1,74 +0,0 @@
-import {VStack, HStack} from '../patterns'
-import Text from './Text'
-
-const LayoutTest = () => {
-  return (
-    <VStack
-      // flex={1}
-      style={{
-        flexGrow: 1,
-        // flexShrink: 1,
-        alignSelf: 'stretch',
-        alignItems: 'stretch',
-        backgroundColor: 'red',
-        gap: 10,
-      }}>
-      <VStack
-        style={{
-          // flexGrow: 1,
-          // flexShrink: 1,
-          // alignSelf: 'stretch',
-          backgroundColor: 'pink',
-        }}>
-        <Component />
-        <Component />
-      </VStack>
-      <VStack
-        style={{
-          borderWidth: 5,
-          borderColor: 'yellow',
-          // flexGrow: 1,
-          // flexShrink: 1,
-          // alignSelf: 'stretch',
-          backgroundColor: 'pink',
-        }}>
-        <Component />
-        <Component />
-      </VStack>
-    </VStack>
-  )
-}
-
-const Component = () => {
-  return (
-    <VStack
-      style={{
-        borderWidth: 1,
-        borderColor: 'black',
-        // flexGrow: 1,
-        alignSelf: 'stretch',
-        backgroundColor: 'blue',
-        // flexShrink: 0,
-        // alignSelf: 'flex-start',
-      }}>
-      <Text>hola</Text>
-      <HStack
-        style={{
-          flexShrink: 0,
-          flexGrow: 1,
-          backgroundColor: 'green',
-          minHeight: 50,
-          maxHeight: 50,
-          width: '100%',
-          // opacity: 0.5,
-        }}
-      />
-      <VStack>
-        <Text>hola</Text>
-        <Text>hola</Text>
-      </VStack>
-    </VStack>
-  )
-}
-
-export default LayoutTest