@scripso-homepad/ui 0.4.2 → 0.4.3

package/src/components/Select.tsx

@@ -0,0 +1,462 @@
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Animated,
+  Easing,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon";
+import {
+  getSelectFieldStyles,
+  SELECT_CHEVRON_COLOR,
+  SELECT_CHEVRON_ROTATION_MS,
+  SELECT_CHEVRON_SIZE,
+  SELECT_ICON_SIZE,
+  SELECT_LABEL_GAP,
+  SELECT_OPTION_GAP,
+  resolveInputVisualState,
+  resolveSelectDropdownHeight,
+  resolveSelectDropdownTop,
+  selectDropdownMetrics,
+  selectFieldMetrics,
+  selectLabelTypography,
+} from "../theme/select";
+import { colors } from "../theme/tokens";
+import {
+  ensureSelectDropdownScrollStyles,
+  SELECT_DROPDOWN_SCROLL_CLASS,
+} from "../utils/countryDropdownScrollStyles";
+import {
+  formatMultiSelectDisplay,
+  resolveSelectedLabels,
+} from "../utils/formatMultiSelectDisplay";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+import { Label } from "./Label";
+
+type SelectIconProps = {
+  size?: number;
+  color?: string;
+};
+
+function renderSelectIcon(icon: ReactNode, color: string) {
+  if (!icon) return null;
+
+  if (isValidElement<SelectIconProps>(icon)) {
+    return cloneElement(icon, {
+      size: icon.props.size ?? SELECT_ICON_SIZE,
+      color: icon.props.color ?? color,
+    });
+  }
+
+  return icon;
+}
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type AnchorLayout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+interface SelectBaseProps {
+  label?: string;
+  placeholder?: string;
+  options: SelectOption[];
+  leftIcon?: ReactNode;
+  disabled?: boolean;
+  error?: string;
+  invalid?: boolean;
+  hint?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  className?: string;
+  fieldClassName?: string;
+  menuClassName?: string;
+  labelClassName?: string;
+  errorClassName?: string;
+  hintClassName?: string;
+}
+
+export interface SingleSelectProps extends SelectBaseProps {
+  multiple?: false;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export interface MultipleSelectProps extends SelectBaseProps {
+  multiple: true;
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+
+export type SelectProps = SingleSelectProps | MultipleSelectProps;
+
+function normalizeSelectedValues(
+  multiple: boolean,
+  value: string | string[] | undefined,
+): string[] {
+  if (multiple) {
+    if (Array.isArray(value)) {
+      return value;
+    }
+
+    return value ? [value] : [];
+  }
+
+  return typeof value === "string" && value.length > 0 ? [value] : [];
+}
+
+export function Select({
+  label,
+  placeholder = "placeholder",
+  value,
+  onValueChange,
+  options,
+  leftIcon,
+  multiple = false,
+  disabled = false,
+  error,
+  invalid,
+  hint,
+  containerStyle,
+  className,
+  fieldClassName,
+  menuClassName,
+  labelClassName,
+  errorClassName,
+  hintClassName,
+}: SelectProps) {
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const menuRef = useRef<ComponentRef<typeof View>>(null);
+  const scrollRef = useRef<ComponentRef<typeof ScrollView>>(null);
+  const helperRef = useRef<ComponentRef<typeof Text>>(null);
+  const chevronRotation = useRef(new Animated.Value(0)).current;
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<AnchorLayout | null>(null);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [valueContainerWidth, setValueContainerWidth] = useState(0);
+
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(menuRef, menuClassName);
+  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+
+  useIsomorphicLayoutEffect(() => {
+    ensureSelectDropdownScrollStyles();
+  }, []);
+
+  useEffect(() => {
+    Animated.timing(chevronRotation, {
+      toValue: open ? 1 : 0,
+      duration: SELECT_CHEVRON_ROTATION_MS,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [chevronRotation, open]);
+
+  const chevronRotate = chevronRotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  const hasError = Boolean(error) || Boolean(invalid);
+  const visualState = resolveInputVisualState({
+    focused: open,
+    error: hasError,
+    disabled,
+  });
+  const fieldStyles = getSelectFieldStyles(visualState);
+
+  const selectedValues = useMemo(
+    () => normalizeSelectedValues(multiple, value),
+    [multiple, value],
+  );
+  const selectedValueSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedLabels = useMemo(
+    () => resolveSelectedLabels(options, selectedValues),
+    [options, selectedValues],
+  );
+  const selectableOptions = useMemo(
+    () => options.filter((option) => !option.disabled),
+    [options],
+  );
+  const selectableIndexByValue = useMemo(
+    () =>
+      new Map(
+        selectableOptions.map((option, index) => [option.value, index] as const),
+      ),
+    [selectableOptions],
+  );
+  const displayLabel = useMemo(() => {
+    if (selectedLabels.length === 0) {
+      return placeholder;
+    }
+
+    if (!multiple) {
+      return selectedLabels[0];
+    }
+
+    if (valueContainerWidth <= 0) {
+      return selectedLabels.join(", ");
+    }
+
+    return formatMultiSelectDisplay(selectedLabels, valueContainerWidth);
+  }, [multiple, placeholder, selectedLabels, valueContainerWidth]);
+
+  const isPlaceholder = selectedLabels.length === 0;
+  const dropdownHeight = resolveSelectDropdownHeight(options.length);
+  const helperMessage = error ?? hint;
+
+  function closeMenu() {
+    setOpen(false);
+    setAnchor(null);
+    setHighlightedIndex(-1);
+  }
+
+  function openMenu() {
+    if (disabled || selectableOptions.length === 0) {
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      const selectedIndex = selectableOptions.findIndex((option) =>
+        selectedValueSet.has(option.value),
+      );
+      setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+
+  function handleSelect(nextValue: string) {
+    if (multiple) {
+      const nextValues = selectedValues.includes(nextValue)
+        ? selectedValues.filter((item) => item !== nextValue)
+        : [...selectedValues, nextValue];
+
+      (onValueChange as MultipleSelectProps["onValueChange"] | undefined)?.(nextValues);
+      return;
+    }
+
+    (onValueChange as SingleSelectProps["onValueChange"] | undefined)?.(nextValue);
+    closeMenu();
+  }
+
+  const optionList = options.map((option, index) => {
+    const selectableIndex = selectableIndexByValue.get(option.value) ?? -1;
+    const isSelected = selectedValueSet.has(option.value);
+    const isHighlighted = selectableIndex === highlightedIndex;
+    const isLast = index === options.length - 1;
+
+    return (
+      <Pressable
+        key={option.value}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: option.disabled, selected: isSelected }}
+        disabled={option.disabled}
+        onPress={() => {
+          if (!option.disabled) {
+            handleSelect(option.value);
+          }
+        }}
+        onHoverIn={() => {
+          if (!option.disabled && selectableIndex >= 0) {
+            setHighlightedIndex(selectableIndex);
+          }
+        }}
+        style={[
+          selectDropdownMetrics.option,
+          isSelected && selectDropdownMetrics.optionSelected,
+          isHighlighted && !isSelected && !option.disabled
+            ? selectDropdownMetrics.optionHighlighted
+            : null,
+          !isLast && styles.optionSpacing,
+          option.disabled && styles.optionDisabled,
+        ]}
+      >
+        <Text
+          style={[
+            selectDropdownMetrics.optionLabel,
+            isSelected && selectDropdownMetrics.optionLabelSelected,
+            option.disabled && styles.optionLabelDisabled,
+          ]}
+          numberOfLines={1}
+        >
+          {option.label}
+        </Text>
+      </Pressable>
+    );
+  });
+
+  const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
+
+  return (
+    <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
+      {label ? (
+        <Label disabled={disabled} style={styles.label} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+
+      <View style={fieldStyles.outline}>
+        <Pressable
+          ref={triggerRef}
+          accessibilityRole="button"
+          accessibilityState={{ disabled, expanded: open }}
+          disabled={disabled}
+          onPress={open ? closeMenu : openMenu}
+          style={[selectFieldMetrics.container, fieldStyles.container]}
+        >
+          {leftIcon ? (
+            <View style={styles.iconSlot}>
+              {renderSelectIcon(leftIcon, fieldStyles.icon)}
+            </View>
+          ) : null}
+          <View
+            style={styles.valueContainer}
+            onLayout={(event) => {
+              setValueContainerWidth(event.nativeEvent.layout.width);
+            }}
+          >
+            <Text
+              style={[
+                selectFieldMetrics.value,
+                fieldStyles.value,
+                isPlaceholder && { color: fieldStyles.placeholder },
+              ]}
+              numberOfLines={1}
+            >
+              {displayLabel}
+            </Text>
+          </View>
+          <Animated.View
+            style={[styles.iconSlot, { transform: [{ rotate: chevronRotate }] }]}
+          >
+            <ChevronDownIcon
+              size={SELECT_CHEVRON_SIZE}
+              color={disabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR}
+            />
+          </Animated.View>
+        </Pressable>
+      </View>
+
+      {helperMessage ? (
+        <Text ref={helperRef} style={error ? styles.error : styles.hint}>
+          {helperMessage}
+        </Text>
+      ) : null}
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={closeMenu}>
+        <Pressable style={styles.overlay} onPress={closeMenu}>
+          {anchor ? (
+            <View
+              ref={menuRef}
+              style={[
+                selectDropdownMetrics.menu,
+                styles.dropdown,
+                {
+                  top: dropdownTop,
+                  left: anchor.x,
+                  width: anchor.width,
+                  height: dropdownHeight,
+                },
+              ]}
+            >
+              <ScrollView
+                ref={scrollRef}
+                style={styles.dropdownScroll}
+                contentContainerStyle={styles.dropdownContent}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator
+                bounces={false}
+                nestedScrollEnabled
+              >
+                {optionList}
+              </ScrollView>
+            </View>
+          ) : null}
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: SELECT_LABEL_GAP,
+  },
+  label: {
+    ...selectLabelTypography,
+  },
+  iconSlot: {
+    width: SELECT_ICON_SIZE,
+    height: SELECT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  valueContainer: {
+    flex: 1,
+    minWidth: 0,
+    justifyContent: "center",
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: colors.transparent,
+  },
+  dropdown: {
+    position: "absolute",
+  },
+  dropdownScroll: {
+    flex: 1,
+  },
+  dropdownContent: {
+    flexGrow: 1,
+  },
+  optionSpacing: {
+    marginBottom: SELECT_OPTION_GAP,
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  optionLabelDisabled: {
+    color: colors.stormGray300,
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300,
+  },
+});

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/src/icons/CalendarIcon.tsx

@@ -0,0 +1,28 @@
+import Svg, { Path } from "react-native-svg";
+import { CALENDAR_ICON_BODY_PATH } from "./calendarIconPaths";
+
+export { CALENDAR_ICON_BODY_PATH } from "./calendarIconPaths";
+
+interface CalendarIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function CalendarIcon({
+  size = 20,
+  color = "#C7CDD1",
+  strokeWidth = 2,
+}: CalendarIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CALENDAR_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/CalendarIcon.web.tsx

@@ -0,0 +1,34 @@
+import { CALENDAR_ICON_BODY_PATH } from "./calendarIconPaths";
+
+interface CalendarIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function CalendarIcon({
+  size = 20,
+  color = "#C7CDD1",
+  strokeWidth = 2,
+}: CalendarIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CALENDAR_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CALENDAR_ICON_BODY_PATH } from "./calendarIconPaths";

package/src/icons/ChevronDownIcon.tsx

@@ -1,7 +1,7 @@
 import Svg, { Path } from "react-native-svg";
-import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+import { CHEVRON_DOWN_PATH, CHEVRON_DOWN_PATH_20 } from "./chevronDownPath";
 
-export { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+export { CHEVRON_DOWN_PATH, CHEVRON_DOWN_PATH_20 } from "./chevronDownPath";
 
 interface ChevronDownIconProps {
   size?: number;
@@ -15,10 +15,17 @@ export function ChevronDownIcon({
   color = "#dadde0",
   strokeWidth = 2,
 }: ChevronDownIconProps) {
+  const useLarge = size >= 20;
+
   return (
-    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Svg
+      width={size}
+      height={size}
+      viewBox={useLarge ? "0 0 20 20" : "0 0 16 16"}
+      fill="none"
+    >
       <Path
-        d={CHEVRON_DOWN_PATH}
+        d={useLarge ? CHEVRON_DOWN_PATH_20 : CHEVRON_DOWN_PATH}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"

package/src/icons/ChevronDownIcon.web.tsx

@@ -1,4 +1,4 @@
-import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+import { CHEVRON_DOWN_PATH, CHEVRON_DOWN_PATH_20 } from "./chevronDownPath";
 
 interface ChevronDownIconProps {
   size?: number;
@@ -12,17 +12,19 @@ export function ChevronDownIcon({
   color = "#dadde0",
   strokeWidth = 2,
 }: ChevronDownIconProps) {
+  const useLarge = size >= 20;
+
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox={useLarge ? "0 0 20 20" : "0 0 16 16"}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden
     >
       <path
-        d={CHEVRON_DOWN_PATH}
+        d={useLarge ? CHEVRON_DOWN_PATH_20 : CHEVRON_DOWN_PATH}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"
@@ -32,4 +34,4 @@ export function ChevronDownIcon({
   );
 }
 
-export { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+export { CHEVRON_DOWN_PATH, CHEVRON_DOWN_PATH_20 } from "./chevronDownPath";

package/src/icons/ChevronNavIcons.tsx

@@ -0,0 +1,44 @@
+import Svg, { Path } from "react-native-svg";
+import { CHEVRON_LEFT_PATH, CHEVRON_RIGHT_PATH } from "./chevronNavPaths";
+
+interface ChevronNavIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function ChevronLeftIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2,
+}: ChevronNavIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function ChevronRightIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2,
+}: ChevronNavIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHEVRON_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronNavIcons.web.tsx

@@ -0,0 +1,57 @@
+import { CHEVRON_LEFT_PATH, CHEVRON_RIGHT_PATH } from "./chevronNavPaths";
+
+interface ChevronNavIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function ChevronLeftIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2,
+}: ChevronNavIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2,
+}: ChevronNavIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/calendarIconPaths.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_ICON_BODY_PATH =
+  "M6.66667 1.6665V4.99984M13.3333 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z";

package/src/icons/chevronDownPath.ts

@@ -1 +1,2 @@
 export const CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
+export const CHEVRON_DOWN_PATH_20 = "M5 7.5L10 12.5L15 7.5";

package/src/icons/chevronNavPaths.ts

@@ -0,0 +1,2 @@
+export const CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";
+export const CHEVRON_RIGHT_PATH = "M7.5 15L12.5 10L7.5 5";