@wecareu/select 0.1.0

package/lib/typescript/src/SelectIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectIcon.d.ts","sourceRoot":"","sources":["../../../src/SelectIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAErD,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACP,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAmC/B"}

package/lib/typescript/src/SelectOption.d.ts

@@ -0,0 +1,3 @@
+import type { SelectOptionItemProps } from './Select.types';
+export declare function SelectOptionItem({ disabled, isMulti, isSelected, onPress, option }: SelectOptionItemProps): JSX.Element;
+//# sourceMappingURL=SelectOption.d.ts.map

package/lib/typescript/src/SelectOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/SelectOption.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAE3D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACP,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAkFrC"}

package/lib/typescript/src/SelectSearch.d.ts

@@ -0,0 +1,3 @@
+import type { SelectSearchProps } from './Select.types';
+export declare function SelectSearch({ onChangeText, value }: SelectSearchProps): JSX.Element;
+//# sourceMappingURL=SelectSearch.d.ts.map

package/lib/typescript/src/SelectSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/SelectSearch.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA2CpF"}

package/lib/typescript/src/animations/shake.d.ts

@@ -0,0 +1,32 @@
+import { Animated } from 'react-native';
+interface UseShakeAnimationParams {
+    /**
+     * Distance in pixels applied to the shake translation
+     */
+    distance?: number;
+    /**
+     * Duration of each shake step in milliseconds
+     */
+    duration?: number;
+    /**
+     * Number of oscillations executed per trigger
+     */
+    iterations?: number;
+}
+interface UseShakeAnimationReturn {
+    /**
+     * Animated style applied to the container that needs feedback
+     */
+    animatedStyle: {
+        transform: {
+            translateX: Animated.AnimatedInterpolation<number>;
+        }[];
+    };
+    /**
+     * Function responsible for starting the shake effect
+     */
+    triggerShake: () => void;
+}
+export declare function useShakeAnimation({ distance, duration, iterations }?: UseShakeAnimationParams): UseShakeAnimationReturn;
+export {};
+//# sourceMappingURL=shake.d.ts.map

package/lib/typescript/src/animations/shake.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shake.d.ts","sourceRoot":"","sources":["../../../../src/animations/shake.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,UAAU,uBAAuB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,uBAAuB;IAC/B;;OAEG;IACH,aAAa,EAAE;QACb,SAAS,EAAE;YAAE,UAAU,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAA;SAAE,EAAE,CAAA;KACpE,CAAA;IACD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAY,EACZ,QAAa,EACb,UAAc,EACf,GAAE,uBAA4B,GAAG,uBAAuB,CAuCxD"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { Select } from './Select';
+export type { SelectMultiProps, SelectOption, SelectProps, SelectSingleProps } from './Select.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@wecareu/select",
+  "version": "0.1.0",
+  "description": "Componente de seleção controlado do design system WeCareU com suporte a modal, busca e múltipla seleção",
+  "keywords": [
+    "react-native",
+    "select",
+    "dropdown",
+    "design-system",
+    "wecareu"
+  ],
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "react-native": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@wecareu/icons": "*",
+    "@wecareu/theme": "*",
+    "@wecareu/tokens": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0-0 <0.76.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.7.2",
+    "@types/jest": "^29.5.0",
+    "jest": "^29.7.0",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.23.2",
+    "typescript": "^5.4.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./lib/module/index.js",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/src/Select.tsx

@@ -0,0 +1,338 @@
+import React from 'react'
+
+import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import { useShakeAnimation } from './animations/shake'
+import type { SelectMultiProps, SelectOption, SelectProps, SelectSingleProps } from './Select.types'
+import { SelectChip } from './SelectChip'
+import { SelectDropdown } from './SelectDropdown'
+import { SelectErrorMessage } from './SelectErrorMessage'
+import { SelectIcon } from './SelectIcon'
+
+export function Select(props: SelectProps): JSX.Element | null {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+
+  const {
+    clearable = false,
+    disabled = false,
+    errorMessage,
+    inputError = false,
+    labels,
+    leftIcon,
+    multiple,
+    onValidation,
+    options,
+    placeholder,
+    readonly = false,
+    required = false,
+    searchable = false,
+    style,
+    testID,
+    value
+  } = props
+
+  if (!options || options.length === 0) {
+    console.error('[Select] The "options" prop must be a non-empty array. Received:', options)
+    return null
+  }
+
+  const isInteractive = !(disabled || readonly)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [touched, setTouched] = React.useState(false)
+
+  const { animatedStyle, triggerShake } = useShakeAnimation({
+    distance: theme.spacing.sm
+  })
+
+  const isEmpty = multiple ? (value as Array<string | number>).length === 0 : value === null || value === undefined
+
+  const internalHasError = React.useMemo(() => {
+    if (!required || !touched) {
+      return false
+    }
+    return isEmpty
+  }, [isEmpty, required, touched])
+
+  React.useEffect(() => {
+    if (!required || !touched) {
+      return
+    }
+    onValidation?.(!internalHasError)
+  }, [internalHasError, onValidation, required, touched])
+
+  const shouldShowError = inputError || internalHasError
+  const requiredErrorMessage = labels?.requiredError ?? 'This field is required'
+  const effectiveErrorMessage = inputError ? errorMessage : internalHasError ? requiredErrorMessage : undefined
+
+  const previousErrorRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (shouldShowError && !previousErrorRef.current) {
+      triggerShake()
+    }
+    previousErrorRef.current = shouldShowError
+  }, [shouldShowError, triggerShake])
+
+  const selectedValues = React.useMemo<Array<string | number>>(() => {
+    if (multiple) {
+      return (value as Array<string | number>) ?? []
+    }
+    if (value !== null && value !== undefined) {
+      return [value as string | number]
+    }
+    return []
+  }, [multiple, value])
+
+  const selectedOptions = React.useMemo(
+    () => options.filter(o => selectedValues.includes(o.value)),
+    [options, selectedValues]
+  )
+
+  const singleLabel = React.useMemo(() => {
+    if (multiple || isEmpty) {
+      return null
+    }
+    return options.find(o => o.value === (value as string | number))?.label ?? null
+  }, [isEmpty, multiple, options, value])
+
+  const handleOpen = React.useCallback(() => {
+    if (!isInteractive) {
+      return
+    }
+    setTouched(true)
+    setIsOpen(true)
+  }, [isInteractive])
+
+  const handleClose = React.useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const handleToggleOption = React.useCallback(
+    (option: SelectOption) => {
+      if (multiple) {
+        const multiProps = props as SelectMultiProps
+        const current = multiProps.value
+        const isSelected = current.includes(option.value)
+        const next = isSelected ? current.filter(v => v !== option.value) : [...current, option.value]
+        multiProps.onChange(next)
+      } else {
+        const singleProps = props as SelectSingleProps
+        singleProps.onChange(option.value)
+        setIsOpen(false)
+      }
+    },
+    [multiple, props]
+  )
+
+  const handleClear = React.useCallback(
+    () => {
+      if (multiple) {
+        const multiProps = props as SelectMultiProps
+        multiProps.onChange([])
+      } else {
+        const singleProps = props as SelectSingleProps
+        singleProps.onChange(null)
+      }
+    },
+    [multiple, props]
+  )
+
+  const handleRemoveChip = React.useCallback(
+    (optionValue: string | number) => {
+      if (!multiple) {
+        return
+      }
+      const multiProps = props as SelectMultiProps
+      multiProps.onChange(multiProps.value.filter(v => v !== optionValue))
+    },
+    [multiple, props]
+  )
+
+  const showClearButton = clearable && !isEmpty && isInteractive
+
+  const renderFieldContent = () => {
+    if (multiple && selectedOptions.length > 0) {
+      return (
+        <ScrollView
+          horizontal
+          keyboardShouldPersistTaps='handled'
+          showsHorizontalScrollIndicator={false}
+          style={styles.chipsScroll}
+          contentContainerStyle={styles.chipsContainer}
+        >
+          {selectedOptions.map(opt => (
+            <SelectChip
+              key={String(opt.value)}
+              disabled={disabled}
+              label={opt.label}
+              onRemove={() => handleRemoveChip(opt.value)}
+            />
+          ))}
+        </ScrollView>
+      )
+    }
+
+    if (!isEmpty && singleLabel) {
+      return (
+        <Text numberOfLines={1} style={styles.selectedLabel}>
+          {singleLabel}
+        </Text>
+      )
+    }
+
+    return (
+      <Text numberOfLines={1} style={styles.placeholder}>
+        {placeholder ?? 'Select...'}
+      </Text>
+    )
+  }
+
+  return (
+    <View style={styles.wrapper}>
+      <Animated.View
+        accessible={false}
+        style={[
+          styles.container,
+          !isInteractive && styles.containerDisabled,
+          shouldShowError && styles.containerError,
+          animatedStyle,
+          style
+        ]}
+        testID={testID}
+      >
+        {leftIcon ? (
+          <View style={styles.iconLeft}>
+            <SelectIcon {...leftIcon} />
+          </View>
+        ) : null}
+
+        <Pressable
+          accessibilityHint={placeholder}
+          accessibilityLabel={singleLabel ?? placeholder ?? 'Select option'}
+          accessibilityRole='combobox'
+          accessibilityState={{ disabled: !isInteractive, expanded: isOpen }}
+          disabled={!isInteractive}
+          onPress={handleOpen}
+          style={styles.fieldPressable}
+        >
+          {renderFieldContent()}
+        </Pressable>
+
+        <View style={styles.rightIcons}>
+          {showClearButton ? (
+            <Pressable
+              accessibilityLabel='Clear selection'
+              accessibilityRole='button'
+              hitSlop={8}
+              onPress={handleClear}
+            >
+              <SelectIcon
+                color={theme.colors.text.tertiary}
+                name='close'
+                size={theme.spacing.md}
+              />
+            </Pressable>
+          ) : (
+            <Pressable
+              accessibilityLabel={isOpen ? 'Close options' : 'Open options'}
+              accessibilityRole='button'
+              disabled={!isInteractive}
+              hitSlop={8}
+              onPress={handleOpen}
+            >
+              <SelectIcon
+                color={theme.colors.text.tertiary}
+                name={isOpen ? 'chevronUp' : 'chevronDown'}
+                size={theme.spacing.md}
+              />
+            </Pressable>
+          )}
+        </View>
+      </Animated.View>
+
+      <SelectErrorMessage
+        message={shouldShowError ? effectiveErrorMessage : undefined}
+        testID={effectiveErrorMessage ? `${testID ?? 'select'}-error` : undefined}
+      />
+
+      <SelectDropdown
+        isMulti={multiple}
+        isOpen={isOpen}
+        onClose={handleClose}
+        onToggleOption={handleToggleOption}
+        options={options}
+        searchable={searchable}
+        selectedValues={selectedValues}
+      />
+    </View>
+  )
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    chipsContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: theme.spacing.xs,
+      paddingVertical: 2
+    },
+    chipsScroll: {
+      flex: 1
+    },
+    container: {
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.brand.primary,
+      borderRadius: theme.radius.xxl,
+      borderWidth: 1,
+      flexDirection: 'row',
+      minHeight: 48,
+      paddingHorizontal: theme.spacing.xl,
+      paddingVertical: theme.spacing.xs,
+      width: '100%'
+    },
+    containerDisabled: {
+      backgroundColor: theme.colors.surface.disabled,
+      borderColor: theme.colors.border.disabled
+    },
+    containerError: {
+      borderColor: theme.colors.status.error
+    },
+    fieldPressable: {
+      alignItems: 'center',
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      minHeight: 32
+    },
+    iconLeft: {
+      marginRight: theme.spacing.xs
+    },
+    placeholder: {
+      color: theme.colors.text.tertiary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      textAlign: 'center'
+    },
+    rightIcons: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      marginLeft: theme.spacing.xs
+    },
+    selectedLabel: {
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      textAlign: 'center'
+    },
+    wrapper: {
+      width: '100%'
+    }
+  })
+}