react-native-varia 0.2.2 → 0.2.3

package/lib/components/SlidingDrawer.tsx

@@ -14,6 +14,7 @@ import {
   SlidingDrawerStyles,
 } from '../theme/SlidingDrawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {TouchableWithoutFeedback} from 'react-native'
 
 export type SlidingDrawerRef = {
   snapTo: (point: number) => void | null
@@ -26,6 +27,7 @@ type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
 type SlidingDrawerProps = SlidingDrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  width?: string
   flex?: number
   direction?: 1 | -1
   onCollapse?: () => void
@@ -35,14 +37,20 @@ type SlidingDrawerProps = SlidingDrawerVariants & {
   axis: 'y' | 'x'
   allowGestures?: boolean
   overlay?: boolean
+  closeOnOverlayPress?: boolean
   children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef>
+  ref?: React.RefObject<SlidingDrawerRef | null>
 }
 
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
+  TouchableWithoutFeedback,
+)
+
 const SlidingDrawer = ({
   colorPalette = 'accent',
   variant = SlidingDrawerTokens.defaultProps.variant,
   animation = SlidingDrawerTokens.defaultProps.animation,
+  width = '100%',
   flex = 0,
   direction = 1,
   onCollapse,
@@ -52,6 +60,7 @@ const SlidingDrawer = ({
   axis,
   allowGestures = true,
   overlay = false,
+  closeOnOverlayPress = true,
   children,
   ref,
 }: SlidingDrawerProps) => {
@@ -147,12 +156,44 @@ const SlidingDrawer = ({
     })
     .onUpdate(event => {
       const delta = axis === 'y' ? event.translationY : event.translationX
-      translate.value = delta + (context.value.position ?? 0)
+
+      const proposed = delta + (context.value.position ?? 0)
+
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+
+      let clamped = proposed
+
+      // Si se pasa del rango, aplicamos resistencia
+      if (proposed < minPoint) {
+        const overdrag = minPoint - proposed
+        // Cuanto mayor sea el exceso, menos se mueve (efecto pesado)
+        clamped = minPoint - overdrag / (1 + overdrag / 60)
+      } else if (proposed > maxPoint) {
+        const overdrag = proposed - maxPoint
+        clamped = maxPoint + overdrag / (1 + overdrag / 60)
+      }
+
+      translate.value = clamped
+      // translate.value = delta + (context.value.position ?? 0)
     })
     .onEnd(({velocityX, velocityY, translationX, translationY}) => {
       const velocity = axis === 'y' ? velocityY : velocityX
       const translation = axis === 'y' ? translationY : translationX
 
+      const minPoint = Math.min(...points)
+      const maxPoint = Math.max(...points)
+
+      // 🧲 1. Si está fuera del rango, lo regresamos suavemente
+      if (translate.value < minPoint) {
+        translate.value = withSpring(minPoint, {velocity})
+        return
+      } else if (translate.value > maxPoint) {
+        translate.value = withSpring(maxPoint, {velocity})
+        return
+      }
+
+      // 🧭 2. Lógica original de snapping
       const forwardsThreshold =
         (points[context.value.snapPoint] +
           points[context.value.snapPoint + 1]) /
@@ -214,20 +255,21 @@ const SlidingDrawer = ({
   return (
     <>
       {overlay && (
-        <Animated.View
-          style={[
-            {
-              ...StyleSheet.absoluteFillObject,
-            },
-            displayOverlayStyle,
-            SlidingDrawerStyles.backdrop(colorPalette),
-          ]}
-        />
+        <AnimatedTouchableOpacity
+          onPress={() => closeOnOverlayPress && collapse()}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              displayOverlayStyle,
+              SlidingDrawerStyles.backdrop(colorPalette),
+            ]}
+          />
+        </AnimatedTouchableOpacity>
       )}
       <GestureDetector gesture={slideGesture}>
         <Animated.View
           style={[
-            styles.container(flex, direction, axis, SlidingDrawerTokens),
+            styles.container(flex, direction, axis, width),
             blockAnimatedStyle,
             SlidingDrawerStyles.container(colorPalette),
           ]}>
@@ -240,14 +282,16 @@ const SlidingDrawer = ({
 export default SlidingDrawer
 
 const styles = StyleSheet.create({
-  container: (flex, direction, axis, slidingDrawerTokens): any => ({
+  container: (flex, direction, axis, width): any => ({
     position: flex === 0 ? 'absolute' : 'relative',
-    bottom: axis === 'y' && direction === 1 ? 0 : 'auto',
-    top: axis === 'y' && direction === -1 ? 0 : 'auto',
+    bottom: axis === 'y' && direction === -1 ? 0 : 'auto',
+    top: axis === 'y' && direction === 1 ? 0 : 'auto',
     left: axis === 'x' ? 0 : 'auto',
     flex: flex === 0 ? 1 : flex,
     height: '100%',
-    width: '100%',
+    width,
+    flexDirection: 'column',
+    alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'flex-start',
     zIndex: 100,

package/lib/icons/Minus.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import {IconWrapperProps, ThemedIcon} from '../components/IconWrapper'
+import {Path} from 'react-native-svg'
+import {View} from 'react-native'
+
+const Minus = ({
+  color,
+  ...props
+}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
+  return (
+    <ThemedIcon {...props} color={color}>
+      <>
+        <Path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.5"
+          d="M1.5 12h20"
+        />
+      </>
+    </ThemedIcon>
+  )
+}
+export default Minus

package/lib/icons/Plus.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import {IconWrapperProps, ThemedIcon} from '../components/IconWrapper'
+import {Path} from 'react-native-svg'
+
+const Plus = ({
+  color,
+  ...props
+}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
+  return (
+    <ThemedIcon {...props} color={color}>
+      <>
+        <Path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.5"
+          d="M1.5 11.5h20m-10-10v20"
+        />
+      </>
+    </ThemedIcon>
+  )
+}
+export default Plus

package/lib/theme/NumberInput.recipe.tsx

@@ -38,7 +38,7 @@ export const NumberInputStyles = StyleSheet.create(theme => ({
       },
       variant: {
         solid: {
-          color: theme.colors[colorPalette]['1'],
+          color: theme.colors[colorPalette].text,
           borderColor: theme.colors.border.default,
           borderWidth: 1,
           borderRadius: theme.radii.sm,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "bin": {
     "varia": "bin/cli.js"
   },
@@ -13,6 +13,7 @@
   "description": "",
   "dependencies": {
     "commander": "^14.0.0",
-    "fs-extra": "^11.3.1"
+    "fs-extra": "^11.3.1",
+    "inquirer": "^8.2.7"
   }
 }

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