@wecareu/select 0.1.0

package/lib/commonjs/index.stories.js

@@ -0,0 +1,383 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithRowColors = exports.WithIconsAndLabelColors = exports.WithFlags = exports.WithError = exports.WithDisabledOptions = exports.Selected = exports.Readonly = exports.MultipleWithInitialValues = exports.MultipleWithDisabledOptions = exports.MultipleSelect = exports.MultipleSearchable = exports.Disabled = exports.Default = exports.Clearable = exports.AllStates = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _addonActions = require("@storybook/addon-actions");
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const GENDER_OPTIONS = [{
+  label: 'Female',
+  value: 'F'
+}, {
+  label: 'Male',
+  value: 'M'
+}, {
+  label: 'Non-binary',
+  value: 'NB'
+}, {
+  label: 'Prefer not to say',
+  value: 'X'
+}];
+const COUNTRIES_OPTIONS = [{
+  description: 'South America',
+  flagCode: 'AR',
+  label: 'Argentina',
+  value: 'AR'
+}, {
+  description: 'Oceania',
+  flagCode: 'AU',
+  label: 'Australia',
+  value: 'AU'
+}, {
+  description: 'South America',
+  flagCode: 'BR',
+  label: 'Brazil',
+  value: 'BR'
+}, {
+  description: 'North America',
+  flagCode: 'CA',
+  label: 'Canada',
+  value: 'CA'
+}, {
+  description: 'South America',
+  flagCode: 'CL',
+  label: 'Chile',
+  value: 'CL'
+}, {
+  description: 'Asia',
+  flagCode: 'CN',
+  label: 'China',
+  value: 'CN'
+}, {
+  description: 'Europe',
+  flagCode: 'FR',
+  label: 'France',
+  value: 'FR'
+}, {
+  description: 'Europe',
+  flagCode: 'DE',
+  label: 'Germany',
+  value: 'DE'
+}, {
+  description: 'Asia',
+  flagCode: 'IN',
+  label: 'India',
+  value: 'IN'
+}, {
+  description: 'Europe',
+  flagCode: 'IT',
+  label: 'Italy',
+  value: 'IT'
+}, {
+  description: 'Asia',
+  flagCode: 'JP',
+  label: 'Japan',
+  value: 'JP'
+}, {
+  description: 'Europe',
+  flagCode: 'PT',
+  label: 'Portugal',
+  value: 'PT'
+}, {
+  description: 'Europe',
+  flagCode: 'ES',
+  label: 'Spain',
+  value: 'ES'
+}, {
+  description: 'North America',
+  flagCode: 'US',
+  label: 'United States',
+  value: 'US'
+}];
+const TAGS_OPTIONS = [{
+  label: 'Design System',
+  value: 'ds'
+}, {
+  label: 'Expo',
+  value: 'expo'
+}, {
+  label: 'React Native',
+  value: 'rn'
+}, {
+  label: 'Storybook',
+  value: 'sb'
+}, {
+  label: 'Testing',
+  value: 'test'
+}, {
+  label: 'TypeScript',
+  value: 'ts'
+}];
+const STATUS_OPTIONS = [{
+  description: 'User is available',
+  icon: 'correct',
+  label: 'Available',
+  labelColor: '#22c55e',
+  value: 'available'
+}, {
+  description: 'User is in a meeting',
+  icon: 'time',
+  label: 'Busy',
+  labelColor: '#f59e0b',
+  value: 'busy'
+}, {
+  description: 'User is not here',
+  disabled: true,
+  icon: 'close',
+  label: 'Away',
+  value: 'away'
+}, {
+  description: 'Appears offline to others',
+  icon: 'notificationOff',
+  label: 'Offline',
+  labelColor: '#94a3b8',
+  value: 'offline'
+}];
+const ROLE_OPTIONS = [{
+  color: '#fef9c3',
+  label: 'Admin',
+  labelColor: '#854d0e',
+  value: 'admin'
+}, {
+  color: '#dcfce7',
+  label: 'Editor',
+  labelColor: '#166534',
+  value: 'editor'
+}, {
+  color: '#dbeafe',
+  label: 'Viewer',
+  labelColor: '#1e40af',
+  value: 'viewer'
+}, {
+  color: '#fee2e2',
+  disabled: true,
+  label: 'Banned',
+  labelColor: '#991b1b',
+  value: 'banned'
+}];
+function StatefulSingleSelect({
+  initialValue = null,
+  ...rest
+}) {
+  const [value, setValue] = _react.default.useState(initialValue);
+  const handleChange = _react.default.useCallback(next => {
+    setValue(next);
+    (0, _addonActions.action)('onChange')(next);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_.Select, _extends({}, rest, {
+    onChange: handleChange,
+    value: value
+  }));
+}
+function StatefulMultiSelect({
+  initialValues = [],
+  ...rest
+}) {
+  const [values, setValues] = _react.default.useState(initialValues);
+  const handleChange = _react.default.useCallback(next => {
+    setValues(next);
+    (0, _addonActions.action)('onChange')(next);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_.Select, _extends({}, rest, {
+    multiple: true,
+    onChange: handleChange,
+    value: values
+  }));
+}
+const meta = {
+  component: _.Select,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  title: 'Forms/Select'
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    options: GENDER_OPTIONS,
+    placeholder: "Select gender"
+  }))
+};
+const Selected = exports.Selected = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    initialValue: "BR",
+    options: COUNTRIES_OPTIONS,
+    placeholder: "Select country"
+  }))
+};
+const WithFlags = exports.WithFlags = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    clearable: true,
+    options: COUNTRIES_OPTIONS,
+    placeholder: "Select country",
+    searchable: true
+  }))
+};
+const WithIconsAndLabelColors = exports.WithIconsAndLabelColors = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    clearable: true,
+    options: STATUS_OPTIONS,
+    placeholder: "Select status"
+  }))
+};
+const WithRowColors = exports.WithRowColors = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    clearable: true,
+    options: ROLE_OPTIONS,
+    placeholder: "Select role"
+  }))
+};
+const MultipleSelect = exports.MultipleSelect = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulMultiSelect, {
+    clearable: true,
+    options: TAGS_OPTIONS,
+    placeholder: "Select tags"
+  }))
+};
+const MultipleWithInitialValues = exports.MultipleWithInitialValues = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulMultiSelect, {
+    clearable: true,
+    initialValues: ['rn', 'ts'],
+    options: TAGS_OPTIONS,
+    placeholder: "Select tags"
+  }))
+};
+const MultipleSearchable = exports.MultipleSearchable = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulMultiSelect, {
+    clearable: true,
+    options: COUNTRIES_OPTIONS,
+    placeholder: "Select countries",
+    searchable: true
+  }))
+};
+const MultipleWithDisabledOptions = exports.MultipleWithDisabledOptions = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulMultiSelect, {
+    clearable: true,
+    options: STATUS_OPTIONS,
+    placeholder: "Select statuses"
+  }))
+};
+const Clearable = exports.Clearable = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    clearable: true,
+    initialValue: "M",
+    options: GENDER_OPTIONS,
+    placeholder: "Select gender"
+  }))
+};
+const WithError = exports.WithError = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    errorMessage: "This field is required",
+    inputError: true,
+    options: GENDER_OPTIONS,
+    placeholder: "Select gender",
+    required: true
+  }))
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    disabled: true,
+    initialValue: "M",
+    options: GENDER_OPTIONS,
+    placeholder: "Select gender"
+  }))
+};
+const Readonly = exports.Readonly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    initialValue: "BR",
+    options: COUNTRIES_OPTIONS,
+    placeholder: "Select country",
+    readonly: true
+  }))
+};
+const WithDisabledOptions = exports.WithDisabledOptions = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    options: STATUS_OPTIONS,
+    placeholder: "Select status"
+  }))
+};
+const AllStates = exports.AllStates = {
+  render: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.column
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.storyItem
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    options: GENDER_OPTIONS,
+    placeholder: "Default - empty"
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.storyItem
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    clearable: true,
+    initialValue: "M",
+    options: GENDER_OPTIONS,
+    placeholder: "With value + clearable"
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.storyItem
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    errorMessage: "Required field",
+    inputError: true,
+    options: GENDER_OPTIONS,
+    placeholder: "Error state"
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.storyItem
+  }, /*#__PURE__*/_react.default.createElement(StatefulSingleSelect, {
+    disabled: true,
+    initialValue: "F",
+    options: GENDER_OPTIONS,
+    placeholder: "Disabled"
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.storyItem
+  }, /*#__PURE__*/_react.default.createElement(StatefulMultiSelect, {
+    clearable: true,
+    initialValues: ['ts', 'rn'],
+    options: TAGS_OPTIONS,
+    placeholder: "Multi select with chips"
+  })))
+};
+const styles = _reactNative.StyleSheet.create({
+  column: {
+    gap: 12,
+    width: 320
+  },
+  container: {
+    width: 320
+  },
+  storyItem: {
+    width: '100%'
+  }
+});
+//# sourceMappingURL=index.stories.js.map

package/lib/commonjs/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_addonActions","_","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","GENDER_OPTIONS","label","value","COUNTRIES_OPTIONS","description","flagCode","TAGS_OPTIONS","STATUS_OPTIONS","icon","labelColor","disabled","ROLE_OPTIONS","color","StatefulSingleSelect","initialValue","rest","setValue","React","useState","handleChange","useCallback","next","action","createElement","Select","onChange","StatefulMultiSelect","initialValues","values","setValues","multiple","meta","component","parameters","layout","tags","title","_default","exports","Default","render","View","style","styles","container","options","placeholder","Selected","WithFlags","clearable","searchable","WithIconsAndLabelColors","WithRowColors","MultipleSelect","MultipleWithInitialValues","MultipleSearchable","MultipleWithDisabledOptions","Clearable","WithError","errorMessage","inputError","required","Disabled","Readonly","readonly","WithDisabledOptions","AllStates","column","storyItem","StyleSheet","create","gap","width"],"sourceRoot":"..\\..\\src","sources":["index.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Select.js

@@ -0,0 +1,265 @@
+import React from 'react';
+import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '@wecareu/theme';
+import { useShakeAnimation } from './animations/shake';
+import { SelectChip } from './SelectChip';
+import { SelectDropdown } from './SelectDropdown';
+import { SelectErrorMessage } from './SelectErrorMessage';
+import { SelectIcon } from './SelectIcon';
+export function Select(props) {
+  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.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(() => {
+    if (multiple) {
+      return value ?? [];
+    }
+    if (value !== null && value !== undefined) {
+      return [value];
+    }
+    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)?.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 => {
+    if (multiple) {
+      const multiProps = props;
+      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;
+      singleProps.onChange(option.value);
+      setIsOpen(false);
+    }
+  }, [multiple, props]);
+  const handleClear = React.useCallback(() => {
+    if (multiple) {
+      const multiProps = props;
+      multiProps.onChange([]);
+    } else {
+      const singleProps = props;
+      singleProps.onChange(null);
+    }
+  }, [multiple, props]);
+  const handleRemoveChip = React.useCallback(optionValue => {
+    if (!multiple) {
+      return;
+    }
+    const multiProps = props;
+    multiProps.onChange(multiProps.value.filter(v => v !== optionValue));
+  }, [multiple, props]);
+  const showClearButton = clearable && !isEmpty && isInteractive;
+  const renderFieldContent = () => {
+    if (multiple && selectedOptions.length > 0) {
+      return /*#__PURE__*/React.createElement(ScrollView, {
+        horizontal: true,
+        keyboardShouldPersistTaps: "handled",
+        showsHorizontalScrollIndicator: false,
+        style: styles.chipsScroll,
+        contentContainerStyle: styles.chipsContainer
+      }, selectedOptions.map(opt => /*#__PURE__*/React.createElement(SelectChip, {
+        key: String(opt.value),
+        disabled: disabled,
+        label: opt.label,
+        onRemove: () => handleRemoveChip(opt.value)
+      })));
+    }
+    if (!isEmpty && singleLabel) {
+      return /*#__PURE__*/React.createElement(Text, {
+        numberOfLines: 1,
+        style: styles.selectedLabel
+      }, singleLabel);
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      style: styles.placeholder
+    }, placeholder ?? 'Select...');
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    accessible: false,
+    style: [styles.container, !isInteractive && styles.containerDisabled, shouldShowError && styles.containerError, animatedStyle, style],
+    testID: testID
+  }, leftIcon ? /*#__PURE__*/React.createElement(View, {
+    style: styles.iconLeft
+  }, /*#__PURE__*/React.createElement(SelectIcon, leftIcon)) : null, /*#__PURE__*/React.createElement(Pressable, {
+    accessibilityHint: placeholder,
+    accessibilityLabel: singleLabel ?? placeholder ?? 'Select option',
+    accessibilityRole: "combobox",
+    accessibilityState: {
+      disabled: !isInteractive,
+      expanded: isOpen
+    },
+    disabled: !isInteractive,
+    onPress: handleOpen,
+    style: styles.fieldPressable
+  }, renderFieldContent()), /*#__PURE__*/React.createElement(View, {
+    style: styles.rightIcons
+  }, showClearButton ? /*#__PURE__*/React.createElement(Pressable, {
+    accessibilityLabel: "Clear selection",
+    accessibilityRole: "button",
+    hitSlop: 8,
+    onPress: handleClear
+  }, /*#__PURE__*/React.createElement(SelectIcon, {
+    color: theme.colors.text.tertiary,
+    name: "close",
+    size: theme.spacing.md
+  })) : /*#__PURE__*/React.createElement(Pressable, {
+    accessibilityLabel: isOpen ? 'Close options' : 'Open options',
+    accessibilityRole: "button",
+    disabled: !isInteractive,
+    hitSlop: 8,
+    onPress: handleOpen
+  }, /*#__PURE__*/React.createElement(SelectIcon, {
+    color: theme.colors.text.tertiary,
+    name: isOpen ? 'chevronUp' : 'chevronDown',
+    size: theme.spacing.md
+  })))), /*#__PURE__*/React.createElement(SelectErrorMessage, {
+    message: shouldShowError ? effectiveErrorMessage : undefined,
+    testID: effectiveErrorMessage ? `${testID ?? 'select'}-error` : undefined
+  }), /*#__PURE__*/React.createElement(SelectDropdown, {
+    isMulti: multiple,
+    isOpen: isOpen,
+    onClose: handleClose,
+    onToggleOption: handleToggleOption,
+    options: options,
+    searchable: searchable,
+    selectedValues: selectedValues
+  }));
+}
+function createStyles(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%'
+    }
+  });
+}
+//# sourceMappingURL=Select.js.map