@butternutbox/pawprint-native 1.6.2 → 2.0.0

package/src/components/molecules/SelectField/SelectFieldItem.tsx

@@ -1,133 +0,0 @@
-import React from "react"
-import { Pressable, View, Text, PressableProps } from "react-native"
-import styled from "@emotion/native"
-import { useTheme } from "@emotion/react"
-import * as SelectPrimitive from "@rn-primitives/select"
-import { Slot } from "@rn-primitives/slot"
-
-type SelectFieldItemOwnProps = {
-  value: string
-  leadingIcon?: React.ReactNode
-  hintText?: string
-  disabled?: boolean
-  isSelected?: boolean
-}
-
-export type SelectFieldItemProps = SelectFieldItemOwnProps &
-  Omit<PressableProps, keyof SelectFieldItemOwnProps>
-
-const parseTokenValue = (value: string): number => parseFloat(value)
-
-const StyledItem = styled(Pressable)<{ disabled?: boolean }>(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-
-  return {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: parseTokenValue(dropdown.listItem.content.gap),
-    height: parseTokenValue(dropdown.listItem.size.height),
-    paddingVertical: parseTokenValue(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue(
-      dropdown.listItem.spacing.horiztonalPadding
-    ),
-    backgroundColor: dropdown.listItem.colour.background.default
-  }
-})
-
-const StyledIconWrapper = styled(View)({
-  flexShrink: 0,
-  alignItems: "center",
-  justifyContent: "center"
-})
-
-const StyledContentWrapper = styled(View)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-
-  return {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: parseTokenValue(dropdown.listItem.content.gap),
-    flex: 1,
-    minWidth: 0
-  }
-})
-
-const StyledTextWrapper = styled(View)({
-  flex: 1,
-  minWidth: 0
-})
-
-const StyledItemText = styled(Text)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-
-  return {
-    color: dropdown.listItem.colour.text.placeholder.default
-  }
-})
-
-const StyledHintText = styled(Text)(({ theme }) => {
-  const { dropdown } = theme.tokens.components.dropdownList
-
-  return {
-    color: dropdown.listItem.colour.text.hint.default,
-    flexShrink: 0
-  }
-})
-
-export const SelectFieldItem = React.forwardRef<View, SelectFieldItemProps>(
-  (
-    { value, leadingIcon, hintText, children, disabled, isSelected, ...rest },
-    ref
-  ) => {
-    const theme = useTheme()
-    const { dropdown } = theme.tokens.components.dropdownList
-    const itemText = children as React.ReactNode
-
-    const backgroundColor = disabled
-      ? dropdown.listItem.colour.background.disabled
-      : isSelected
-        ? dropdown.listItem.colour.background.hover
-        : dropdown.listItem.colour.background.default
-
-    const textColor = disabled
-      ? dropdown.listItem.colour.text.placeholder.disabled
-      : dropdown.listItem.colour.text.placeholder.default
-
-    return (
-      <SelectPrimitive.Item
-        label={String(children)}
-        value={value}
-        disabled={disabled}
-        asChild
-      >
-        <Slot ref={ref}>
-          <StyledItem disabled={disabled} style={{ backgroundColor }} {...rest}>
-            {leadingIcon && (
-              <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>
-            )}
-            <StyledContentWrapper>
-              <StyledTextWrapper>
-                <StyledItemText style={{ color: textColor }}>
-                  {itemText}
-                </StyledItemText>
-              </StyledTextWrapper>
-              {hintText && (
-                <StyledHintText
-                  style={{
-                    color: disabled
-                      ? dropdown.listItem.colour.text.hint.disabled
-                      : dropdown.listItem.colour.text.hint.default
-                  }}
-                >
-                  {hintText}
-                </StyledHintText>
-              )}
-            </StyledContentWrapper>
-          </StyledItem>
-        </Slot>
-      </SelectPrimitive.Item>
-    )
-  }
-)
-
-SelectFieldItem.displayName = "SelectField.Item"

package/src/components/molecules/SelectField/SelectFieldTrigger.tsx

@@ -1,188 +0,0 @@
-import React, { useEffect, useRef } from "react"
-import { Pressable, View, PressableProps, Animated, Easing } from "react-native"
-import styled from "@emotion/native"
-import { useTheme } from "@emotion/react"
-import * as SelectPrimitive from "@rn-primitives/select"
-import { Slot } from "@rn-primitives/slot"
-import { Icon } from "../../atoms/Icon"
-import {
-  KeyboardArrowDown,
-  Error as ErrorIcon,
-  CheckCircle as SuccessIcon
-} from "@butternutbox/pawprint-icons/core"
-import type { InputState } from "../../atoms/Input/InputField"
-
-type SelectFieldTriggerOwnProps = {
-  state?: InputState
-  leadingIcon?: React.ReactNode
-  children?: React.ReactNode
-  isOpen?: boolean
-  isSearching?: boolean
-  actionIcon?: React.ReactNode
-}
-
-export type SelectFieldTriggerProps = SelectFieldTriggerOwnProps &
-  Omit<PressableProps, keyof SelectFieldTriggerOwnProps>
-
-const parseTokenValue = (value: string): number => parseFloat(value)
-
-const StyledTriggerWrapper = styled(Animated.View)<{ state: InputState }>(({
-  theme,
-  state: _state
-}) => {
-  const { spacing, colour, borderRadius, size } = theme.tokens.components.inputs
-
-  return {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: parseTokenValue(spacing.field.gap),
-    minWidth: parseTokenValue(size.field.minWidth),
-    width: "100%",
-    height: parseTokenValue(size.field.height),
-    backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue(borderRadius.field.default)
-  }
-})
-
-const StyledIconWrapper = styled(View)({
-  flexShrink: 0,
-  alignItems: "center",
-  justifyContent: "center"
-})
-
-const StyledArrowIcon = styled(Animated.View)({
-  flexShrink: 0,
-  alignItems: "center",
-  justifyContent: "center"
-})
-
-export const SelectFieldTrigger = React.forwardRef<
-  View,
-  SelectFieldTriggerProps
->(
-  (
-    {
-      state = "default",
-      leadingIcon,
-      children,
-      isOpen = false,
-      isSearching = false,
-      actionIcon,
-      ...rest
-    },
-    ref
-  ) => {
-    const theme = useTheme()
-    const { colour, borderWidth, spacing } = theme.tokens.components.inputs
-
-    const hasState = state === "error" || state === "success"
-
-    const baseBorderWidth = parseTokenValue(borderWidth.field.default)
-    const selectedBorderWidth = parseTokenValue(borderWidth.field.selected)
-    const baseVerticalPadding = parseTokenValue(spacing.field.verticalPadding)
-    const baseHorizontalPadding = parseTokenValue(
-      spacing.field.horizontalPadding
-    )
-    const borderDelta = selectedBorderWidth - baseBorderWidth
-
-    const borderColor =
-      state === "error"
-        ? colour.field.border.error
-        : state === "success"
-          ? colour.field.border.success
-          : isOpen
-            ? colour.field.border.selected
-            : colour.field.border.default
-
-    const isActiveBorder = isOpen || hasState
-    const borderAnim = useRef(
-      new Animated.Value(isActiveBorder ? 1 : 0)
-    ).current
-    const rotationAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current
-
-    useEffect(() => {
-      Animated.parallel([
-        Animated.timing(borderAnim, {
-          toValue: isActiveBorder ? 1 : 0,
-          duration: 50,
-          easing: Easing.ease,
-          useNativeDriver: false
-        }),
-        Animated.timing(rotationAnim, {
-          toValue: isOpen ? 1 : 0,
-          duration: 250,
-          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
-          useNativeDriver: true
-        })
-      ]).start()
-    }, [isActiveBorder, isOpen, borderAnim, rotationAnim])
-
-    const animatedBorderWidth = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseBorderWidth, selectedBorderWidth]
-    })
-
-    const animatedPaddingVertical = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseVerticalPadding, baseVerticalPadding - borderDelta]
-    })
-
-    const animatedPaddingHorizontal = borderAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [baseHorizontalPadding, baseHorizontalPadding - borderDelta]
-    })
-
-    const animatedRotation = rotationAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: ["0deg", "180deg"]
-    })
-
-    const stateIcon =
-      state === "error" ? (
-        <Icon icon={ErrorIcon} size="md" colour="error" />
-      ) : state === "success" ? (
-        <Icon icon={SuccessIcon} size="md" colour="success" />
-      ) : null
-
-    const triggerContent = (
-      <StyledTriggerWrapper
-        state={state}
-        style={[
-          {
-            borderColor,
-            borderWidth: animatedBorderWidth,
-            paddingVertical: animatedPaddingVertical,
-            paddingHorizontal: animatedPaddingHorizontal
-          }
-        ]}
-      >
-        {leadingIcon && <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>}
-        {children}
-        {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
-        {actionIcon ? (
-          <StyledIconWrapper>{actionIcon}</StyledIconWrapper>
-        ) : (
-          <StyledArrowIcon
-            style={{ transform: [{ rotate: animatedRotation }] }}
-          >
-            <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
-          </StyledArrowIcon>
-        )}
-      </StyledTriggerWrapper>
-    )
-
-    if (isSearching) {
-      return <View ref={ref}>{triggerContent}</View>
-    }
-
-    return (
-      <SelectPrimitive.Trigger asChild>
-        <Slot ref={ref}>
-          <Pressable {...rest}>{triggerContent}</Pressable>
-        </Slot>
-      </SelectPrimitive.Trigger>
-    )
-  }
-)
-
-SelectFieldTrigger.displayName = "SelectField.Trigger"

package/src/components/molecules/SelectField/SelectFieldValue.tsx

@@ -1,33 +0,0 @@
-import React from "react"
-import { View, ViewProps } from "react-native"
-import { useTheme } from "@emotion/react"
-import * as SelectPrimitive from "@rn-primitives/select"
-import { Typography } from "../../atoms/Typography"
-
-type SelectFieldValueProps = {
-  placeholder?: string
-  hasValue?: boolean
-} & Omit<ViewProps, "children">
-
-export const SelectFieldValue = React.forwardRef<View, SelectFieldValueProps>(
-  ({ placeholder, hasValue = true, ...rest }, ref) => {
-    const theme = useTheme()
-    const { colour, field } = theme.tokens.components.inputs
-
-    return (
-      <View ref={ref} style={{ flex: 1, minWidth: 0 }} {...rest}>
-        <Typography
-          token={field.placeholder.default}
-          color={
-            hasValue ? colour.field.text.default : colour.field.text.placeholder
-          }
-          align="left"
-        >
-          <SelectPrimitive.Value placeholder={placeholder ?? ""} />
-        </Typography>
-      </View>
-    )
-  }
-)
-
-SelectFieldValue.displayName = "SelectField.Value"

package/src/components/molecules/SelectField/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useSelectField } from "./useSelectField"
-export type { SelectValidationRule } from "./useSelectField"

package/src/components/molecules/SelectField/hooks/useSelectField.ts

@@ -1,84 +0,0 @@
-import { useState, useMemo } from "react"
-import type { SelectFieldProps } from "../SelectField"
-import type { InputState } from "../../../atoms/Input/InputField"
-import type { Option } from "@rn-primitives/select"
-
-export type SelectValidationRule<T = string | Option> = {
-  test: (value: T | null) => boolean
-  message: string
-}
-
-type SelectOptions<T = string | Option> = {
-  initialValue?: T | null
-  onValueChange?: (value: T | null) => void
-  validationRule?: SelectValidationRule<T>
-}
-
-type SelectReturn<T = string | Option> = {
-  value: T | null
-  onValueChange: (value: T | null) => void
-  state?: InputState
-  error?: string
-}
-
-/**
- * Hook for managing SelectField state with built-in validation.
- * Handles value, validation state, and error message automatically.
- *
- * @example
- * ```tsx
- * // Simple usage without validation
- * const selectProps = useSelectField()
- * <SelectField {...selectProps} label="Country" />
- *
- * // With validation rule
- * const selectProps = useSelectField({
- *   validationRule: {
- *     test: (v) => v !== null,
- *     message: "Please select an option"
- *   }
- * })
- * <SelectField {...selectProps} label="Category" />
- * ```
- */
-export function useSelectField<T = string | Option>(
-  options: SelectOptions<T> = {}
-): SelectReturn<T> {
-  const {
-    initialValue,
-    onValueChange: onValueChangeCallback,
-    validationRule
-  } = options
-
-  const [value, setValue] = useState<T | null>(initialValue ?? null)
-
-  const handleValueChange: SelectFieldProps<T>["onValueChange"] = (
-    newValue
-  ) => {
-    const typedValue = Array.isArray(newValue) ? newValue[0] : newValue
-    setValue(typedValue ?? null)
-    onValueChangeCallback?.(typedValue as any)
-  }
-
-  const { state, error } = useMemo(() => {
-    if (!validationRule) {
-      return { state: undefined, error: undefined }
-    }
-
-    if (value === null || value === initialValue) {
-      return { state: "default" as InputState, error: undefined }
-    }
-
-    const isValid = validationRule.test(value)
-    return {
-      state: (isValid ? "success" : "error") as InputState,
-      error: isValid ? undefined : validationRule.message
-    }
-  }, [value, validationRule, initialValue])
-
-  return {
-    value,
-    onValueChange: handleValueChange,
-    ...(validationRule && { state, error })
-  }
-}

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { useDrawerKeyboardAvoidance } from "./useDrawerKeyboardAvoidance"

package/src/hooks/useDrawerKeyboardAvoidance.ts

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react"
-import { Keyboard, StyleProp, ViewStyle } from "react-native"
-
-const useDrawerKeyboardAvoidance = (
-  minPadding: number = 16
-): { contentContainerStyle: StyleProp<ViewStyle> } => {
-  const [keyboardHeight, setKeyboardHeight] = useState(0)
-
-  useEffect(() => {
-    const showListener = Keyboard.addListener("keyboardDidShow", (e) => {
-      setKeyboardHeight(e.endCoordinates.height)
-    })
-    const hideListener = Keyboard.addListener("keyboardDidHide", () => {
-      setKeyboardHeight(0)
-    })
-    return () => {
-      showListener.remove()
-      hideListener.remove()
-    }
-  }, [])
-
-  return {
-    contentContainerStyle: {
-      paddingBottom: Math.max(minPadding, keyboardHeight)
-    }
-  }
-}
-
-export { useDrawerKeyboardAvoidance }