react-native-varia 0.0.1 → 0.2.0

package/lib/components/Select.tsx

@@ -0,0 +1,272 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  ReactElement,
+} from 'react'
+import {
+  View,
+  TouchableOpacity,
+  ScrollView,
+  TouchableWithoutFeedback,
+  StyleSheet,
+} from 'react-native'
+import {Portal} from '@gorhom/portal'
+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'
+
+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.Provider')
+  return context
+}
+
+type RootProps = SelectVariants & {
+  options: Option[]
+  value?: string
+  onChange?: (val: string) => void
+  defaultValue?: string
+  placeholder?: string
+  colorPalette?: PalettesWithNestedKeys
+  flex?: number
+  portalHostName?: string
+  children: ReactNode
+}
+
+const SelectRoot = ({
+  options,
+  value: propValue,
+  onChange: propOnChange,
+  defaultValue = '',
+  variant = SelectDefaultVariants.variant,
+  size = SelectDefaultVariants.size,
+  colorPalette = 'accent',
+  flex = 1,
+  portalHostName = 'select',
+  children,
+}: RootProps) => {
+  SelectStyles.useVariants({variant, size})
+  const [internalValue, setInternalValue] = useState(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)
+  }
+
+  const trigger = React.Children.toArray(children).find(
+    (child: any) =>
+      React.isValidElement(child) &&
+      (child.type as any).displayName === 'SelectTrigger',
+  )
+
+  const portalChildren = React.Children.toArray(children).filter(
+    (child: any) =>
+      !(
+        React.isValidElement(child) &&
+        (child.type as any).displayName === 'SelectTrigger'
+      ),
+  )
+
+  return (
+    <View style={[styles.container(flex)]}>
+      {trigger &&
+        React.cloneElement(trigger as ReactElement<TriggerProps>, {
+          isOpen,
+          setIsOpen,
+          value,
+          options,
+          variant:
+            (trigger as ReactElement<TriggerProps>).props.variant ?? variant,
+          size: (trigger as ReactElement<TriggerProps>).props.size ?? size,
+          colorPalette:
+            (trigger as ReactElement<TriggerProps>).props.colorPalette ??
+            colorPalette,
+        })}
+
+      {isOpen && (
+        <Portal hostName={portalHostName}>
+          <SelectContext.Provider
+            value={{
+              value,
+              setValue,
+              isOpen,
+              setIsOpen,
+              options,
+              colorPalette,
+              variant,
+              size,
+            }}>
+            <View style={styles.portalContainer}>{portalChildren}</View>
+          </SelectContext.Provider>
+        </Portal>
+      )}
+    </View>
+  )
+}
+
+interface TriggerProps {
+  placeholder?: string
+  isOpen?: boolean
+  setIsOpen?: (v: boolean) => void
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+  colorPalette?: PalettesWithNestedKeys
+  value?: string
+  options?: Option[]
+}
+
+const SelectTrigger = ({
+  placeholder = 'Selecciona una opción',
+  isOpen,
+  setIsOpen,
+  variant,
+  size,
+  colorPalette = 'accent',
+  value,
+  options = [],
+}: TriggerProps) => {
+  SelectStyles.useVariants({variant, size})
+  const selected = options.find(opt => opt.value === value)
+  return (
+    <TouchableWithoutFeedback onPress={() => setIsOpen?.(!isOpen)}>
+      <View style={[styles.input, SelectStyles.trigger(colorPalette)]}>
+        <Text>{selected ? selected.label : placeholder}</Text>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+SelectTrigger.displayName = 'SelectTrigger'
+
+const SelectOverlay = ({
+  variant,
+  size,
+  colorPalette = 'accent',
+}: {
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+  colorPalette?: PalettesWithNestedKeys
+}) => {
+  SelectStyles.useVariants({variant, size})
+  const {setIsOpen} = useSelect()
+  return (
+    <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+      <View style={[styles.backdrop, SelectStyles.overlay(colorPalette)]} />
+    </TouchableWithoutFeedback>
+  )
+}
+SelectOverlay.displayName = 'SelectOverlay'
+
+const SelectContent = ({
+  children,
+  ...props
+}: {
+  children: ReactNode
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+}) => {
+  const {variant, size, colorPalette} = {...useSelect(), ...props}
+  SelectStyles.useVariants({variant, size})
+  return (
+    <View style={[styles.modalContent, SelectStyles.content(colorPalette)]}>
+      <ScrollView>{children}</ScrollView>
+    </View>
+  )
+}
+SelectContent.displayName = 'SelectContent'
+
+const SelectItem = ({value, label, ...props}: Option) => {
+  const {
+    variant,
+    size,
+    setValue,
+    value: selected,
+    colorPalette,
+  } = {...useSelect(), ...props}
+  const isSelected = selected === value
+  SelectStyles.useVariants({variant, size})
+  return (
+    <TouchableOpacity onPress={() => setValue(value)}>
+      <View style={[styles.item, SelectStyles.item(colorPalette, isSelected)]}>
+        <Text style={SelectStyles.itemText(colorPalette, isSelected)}>
+          {label}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+SelectItem.displayName = 'SelectItem'
+
+const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Overlay: SelectOverlay,
+  Content: SelectContent,
+  Item: SelectItem,
+}
+
+export default Select
+
+const styles = UniStyleSheet.create({
+  container: (flex: number) => ({
+    flexGrow: flex,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  }),
+  input: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  item: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  modalContent: {
+    overflow: 'hidden',
+    alignSelf: 'stretch',
+  },
+  portalContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/lib/components/SelectOld.tsx

@@ -0,0 +1,153 @@
+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/Slider.tsx

@@ -7,12 +7,13 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 import {runOnJS} from 'react-native-worklets'
-import {hexToRgba} from '../style/utils'
-import {SliderStyles, SliderTokens} from '../theme/Slider.recipe'
+import {SliderStyles, SliderDefaultVariants} from '../theme/Slider.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
 type SliderProps = SliderVariants & {
+  colorPalette?: PalettesWithNestedKeys
   thickness?: number
   minimumTrackThickness?: number
   minimumTrackColor?: string
@@ -30,10 +31,9 @@ type SliderProps = SliderVariants & {
 }
 
 const Slider = ({
-  size = SliderTokens.defaultProps.size,
-  colorPalette = SliderTokens.defaultProps.colorPalette,
-  thickness = 10,
-  minimumTrackColor = '#FFF',
+  colorPalette = 'accent',
+  variant = SliderDefaultVariants.variant,
+  size = SliderDefaultVariants.size,
   displayStepsOnMinimumTrack = false,
   thumbChildren: ThumbChildren,
   axis = 'x',
@@ -50,17 +50,21 @@ const Slider = ({
   }
   SliderStyles.useVariants({
     size,
-    colorPalette,
+    variant,
   })
-  const halfSize = (SliderTokens.thumb.variants.size[size]?.width ?? 0) / 2
+  // @ts-ignore
+  const halfSize = (SliderStyles.thumb(colorPalette).width ?? 0) / 2
   const thumbSize = {
-    width: SliderTokens.thumb.variants.size[size]?.width,
-    height: SliderTokens.thumb.variants.size[size]?.height,
+    // @ts-ignore
+    width: SliderStyles.thumb(colorPalette).width,
+    // @ts-ignore
+    height: SliderStyles.thumb(colorPalette).height,
   }
-  const maximumTrackWidth =
-    SliderTokens.maximumTrack.variants.size[size]?.height ?? 0
+  // @ts-ignore
+  const maximumTrackWidth = SliderStyles.maximumTrack(colorPalette).height ?? 0
   const minimumTrackWidth =
-    SliderTokens.minimumTrack.variants.size[size]?.height ?? 0
+    // @ts-ignore
+    SliderStyles.minimumTrack(colorPalette, false).height ?? 0
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)
@@ -73,7 +77,6 @@ const Slider = ({
 
   const slideGesture = Gesture.Pan()
     .onTouchesDown(() => {
-      // Mark the child gesture as active when touching the child zone
       isInsideChild.value = true
     })
     .onBegin(() => {
@@ -116,25 +119,22 @@ const Slider = ({
     .onFinalize(() => {
       isInsideChild.value = false
     })
-  // New Tap Gesture
   const tapGesture = Gesture.Tap()
     .onBegin(e => {
       if (isInsideChild.value) {
-        return // Prevent parent gesture in child zone
+        return
       }
       const tapPosition = axis === 'x' ? e.x : e.y
       const stepLength = steps ? trackLength.value / steps : 1
 
-      // Calculate the raw position
       const rawValue =
         axis === 'y'
           ? Math.max(
               0,
               Math.min(trackLength.value - tapPosition, trackLength.value),
-            ) // Invert for "y"
+            )
           : Math.max(0, Math.min(tapPosition, trackLength.value))
 
-      // Snap to step if needed
       const snappedValue = steps
         ? Math.round(rawValue / stepLength) * stepLength
         : rawValue
@@ -159,27 +159,19 @@ const Slider = ({
   }))
 
   const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
-  console.log('🚀 ~ opacityTrack:', opacityTrack)
-
-  // const minimumTrackBackgroundColor =
-  //   SliderTokens.minimumTrack.variants.colorPalette[colorPalette]
-  //     ?.backgroundColor;
-  const minimumTrackBackgroundColor = hexToRgba('#ff0000', 0.5)
-  console.log('🚀 ~ minimumTrackBackgroundColor:', minimumTrackBackgroundColor)
 
   return (
-    // <View style={{flexDirection: 'row', flex: 1}}>
     <View
       style={[
         styles.container(maximumTrackWidth, halfSize),
-        SliderStyles.container,
+        SliderStyles.container(colorPalette),
       ]}>
       {axis === 'x' && <View style={{width: halfSize}} />}
       <GestureDetector gesture={tapGesture}>
         <View
           style={[
             styles.maximumTrack(maximumTrackWidth),
-            SliderStyles.maximumTrack,
+            SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
           {steps && (
@@ -188,7 +180,10 @@ const Slider = ({
                 (_, i) => (
                   <View
                     key={i}
-                    style={[styles.step(i, steps), SliderStyles.step]}
+                    style={[
+                      styles.step(i, steps),
+                      SliderStyles.step(colorPalette),
+                    ]}
                   />
                 ),
               )}
@@ -197,12 +192,15 @@ const Slider = ({
           <Animated.View
             style={[
               styles.minimumTrack(halfSize, minimumTrackWidth),
-              SliderStyles.minimumTrack(opacityTrack),
+              SliderStyles.minimumTrack(colorPalette, opacityTrack),
               animatedTrack,
             ]}>
             <GestureDetector gesture={slideGesture}>
               <View
-                style={[SliderStyles.thumb, styles.thumb(halfSize, thumbSize)]}>
+                style={[
+                  SliderStyles.thumb(colorPalette),
+                  styles.thumb(halfSize, thumbSize),
+                ]}>
                 {ThumbChildren || null}
               </View>
             </GestureDetector>
@@ -265,13 +263,11 @@ const stylesX = StyleSheet.create(theme => ({
     width: 1,
     height: '100%',
     backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.background,
+      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
   }),
 }))
 const stylesY = StyleSheet.create(theme => ({
   container: (maximumTrackWidth, halfSize) => ({
-    // borderWidth: 1,
-    // borderColor: theme.colors.foreground,
     flex: 1,
     maxWidth: maximumTrackWidth,
     maxHeight: 'auto',
@@ -280,13 +276,10 @@ const stylesY = StyleSheet.create(theme => ({
     height: '100%',
     paddingTop: halfSize,
     paddingRight: 0,
-    backgroundColor: theme.colors.background,
     flexDirection: 'column',
   }),
   maximumTrack: maximumTrackWidth => ({
     flex: 1,
-    borderRadius: 22,
-    backgroundColor: theme.colors.background,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
@@ -307,7 +300,6 @@ const stylesY = StyleSheet.create(theme => ({
   }),
   thumb: (halfSize, thumbSize) => ({
     borderRadius: 25,
-    backgroundColor: theme.colors.foreground,
     position: 'absolute',
     top: 0,
     zIndex: 2,
@@ -327,7 +319,7 @@ const stylesY = StyleSheet.create(theme => ({
     width: '100%',
     height: 1,
     backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.foreground,
+      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
   }),
 }))