react-native-varia 0.2.2 → 0.2.4

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/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

package/lib/theme/Button.recipe-old.tsx

@@ -1,67 +0,0 @@
-import { StyleSheet } from "react-native-unistyles"
-
-const ButtonStyles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: 'tomato',
-        },
-        secondary: {
-          backgroundColor: theme.colors.foreground,
-        }
-      },
-      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,
-        }
-      }
-    }
-  }
-}))
-
-
-export default ButtonStyles