@space-uy/pulsar-ui 0.2.0

package/src/components/OtpInputContainer.tsx

@@ -0,0 +1,196 @@
+import { forwardRef, useCallback, useRef, useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import {
+  View,
+  Keyboard,
+  type TextInputKeyPressEventData,
+  type NativeSyntheticEvent,
+  type ViewProps,
+  type TextInputProps,
+  type TextInput,
+} from 'react-native';
+import { OtpInput } from './OtpInput';
+import useTheme from '../hooks/useTheme';
+export type OtpInputContainerRef = {
+  clear: () => void;
+};
+
+type OtpInputContainerProps = {
+  inputProps?: Omit<
+    TextInputProps,
+    | 'style'
+    | 'onChangeText'
+    | 'onKeyPress'
+    | 'autoComplete'
+    | 'keyboardType'
+    | 'autoFocus'
+  >;
+  inputStyle?: TextInputProps['style'];
+  containerProps?: Omit<ViewProps, 'style'>;
+  containerStyle?: ViewProps['style'];
+  length?: number;
+  onFillEnded?: (otp: string) => void;
+  autoFocus?: boolean;
+  editable?: boolean;
+};
+
+export const OtpInputContainer = forwardRef<
+  OtpInputContainerRef,
+  OtpInputContainerProps
+>(
+  (
+    {
+      length = 4,
+      inputProps,
+      inputStyle,
+      containerProps,
+      containerStyle,
+      onFillEnded,
+      autoFocus = true,
+      editable = true,
+    },
+    _
+  ) => {
+    const isIOS = Platform.OS === 'ios';
+    const pins = Array.from({ length }).map((__, i) => i);
+    const inputRefs = useRef<TextInput[]>([]);
+    const pinsValues = useRef<string[]>([]);
+    const iosOTP = useRef<{
+      key: string;
+      index: number | null;
+    }>({ key: '', index: null });
+    const timeoutRefs = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+    const [maskedPins, setMaskedPins] = useState<boolean[]>(
+      new Array(length).fill(false)
+    );
+
+    const { colors } = useTheme();
+
+    const maskPin = useCallback((index: number) => {
+      setMaskedPins((prev) => {
+        const newMasked = [...prev];
+        newMasked[index] = true;
+        return newMasked;
+      });
+    }, []);
+
+    const handleOTP = useCallback(
+      (otp: string): boolean => {
+        const regexp = new RegExp(`[0-9]{${length}}`);
+        const otps = otp.match(regexp);
+        if (otps?.length) {
+          const otpSplits = otp.split('');
+          otpSplits.forEach((otpSplit, i) =>
+            inputRefs?.current[i]?.setNativeProps({ text: otpSplit })
+          );
+          onFillEnded?.(otp);
+          iosOTP.current = { key: '', index: null };
+          Keyboard.dismiss();
+          return true;
+        }
+        return false;
+      },
+      [length, onFillEnded]
+    );
+
+    const handleChangeText = useCallback(
+      async (text: string, index: number) => {
+        pinsValues.current[index] = text;
+
+        if (timeoutRefs.current[index]) {
+          clearTimeout(timeoutRefs.current[index]);
+        }
+
+        setMaskedPins((prev) => {
+          const newMasked = [...prev];
+          newMasked[index] = false;
+          return newMasked;
+        });
+
+        timeoutRefs.current[index] = setTimeout(() => {
+          maskPin(index);
+        }, 500);
+
+        if (index + 1 <= pins.length - 1) {
+          inputRefs?.current[index + 1]?.focus();
+        } else {
+          onFillEnded?.(pinsValues.current.join(''));
+          Keyboard.dismiss();
+        }
+      },
+      [maskPin, pins.length, onFillEnded]
+    );
+
+    const onKeyPress = useCallback(
+      (
+        event: NativeSyntheticEvent<TextInputKeyPressEventData>,
+        index: number
+      ) => {
+        event.persist();
+        if (isIOS && Number.isInteger(Number(event.nativeEvent.key))) {
+          if (iosOTP.current.index === null) {
+            iosOTP.current = { key: event.nativeEvent.key, index };
+          } else {
+            if (iosOTP.current.index === index) {
+              iosOTP.current = {
+                key: `${iosOTP.current.key}${event.nativeEvent.key}`,
+                index,
+              };
+            } else {
+              iosOTP.current = { key: '', index: null };
+            }
+          }
+          if (iosOTP.current.key.length === length) {
+            handleOTP(iosOTP.current.key);
+            return;
+          }
+        }
+
+        if (event.nativeEvent.key === 'Backspace') {
+          onFillEnded?.('');
+          iosOTP.current = { key: '', index: null };
+          if (index - 1 >= 0) {
+            inputRefs?.current[index - 1]?.focus();
+          }
+        }
+      },
+      [handleOTP, length, onFillEnded, isIOS]
+    );
+
+    return (
+      <View style={[styles.container, containerStyle]} {...containerProps}>
+        {pins.map((pin) => {
+          return (
+            <OtpInput
+              {...inputProps}
+              autoFocus={autoFocus && pin === 0}
+              ref={(input) => inputRefs?.current.push(input as TextInput)}
+              key={pin}
+              style={[
+                inputStyle,
+                { borderColor: colors.border, color: colors.foreground },
+              ]}
+              onChangeText={(text) => handleChangeText(text, pin)}
+              onKeyPress={(event) => onKeyPress(event, pin)}
+              autoComplete="sms-otp"
+              textContentType="oneTimeCode"
+              keyboardType="numeric"
+              secureTextEntry={maskedPins[pin]}
+              editable={editable}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Select.tsx

@@ -0,0 +1,219 @@
+import { useCallback, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  Pressable,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated';
+import { FlatList } from 'react-native-gesture-handler';
+
+import InputContainer from './InputContainer';
+import BottomSheet, { type BottomSheetProps } from './BottomSheet';
+import Text from './Text';
+import Icon from './Icon';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  value?: SelectOption;
+  options: SelectOption[];
+  onChange: (option: SelectOption) => void;
+  title?: string;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  error?: boolean;
+  hint?: string;
+};
+
+const OptionItem = ({
+  style,
+  option,
+  selected,
+  onChange,
+}: {
+  style?: StyleProp<ViewStyle>;
+  option: SelectOption;
+  selected: boolean;
+  onChange: (option: SelectOption) => void;
+}) => {
+  const { theme, colors } = useTheme();
+  const pressed = useSharedValue(0);
+
+  const pressedColor = convertHexToRgba(colors.foreground, 0.1);
+
+  const animatedPress = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      pressed.value,
+      [0, 1],
+      [selected ? pressedColor : 'transparent', pressedColor]
+    ),
+  }));
+
+  return (
+    <Pressable
+      key={option.value}
+      style={style}
+      onPress={() => onChange(option)}
+      onPressIn={() => (pressed.value = 1)}
+      onPressOut={() => (pressed.value = 0)}
+      onHoverIn={() => (pressed.value = 1)}
+      onHoverOut={() => (pressed.value = 0)}
+    >
+      <Animated.View
+        style={[
+          styles.optionContent,
+          { borderRadius: theme.roundness - 2 },
+          animatedPress,
+        ]}
+      >
+        <Text
+          style={[styles.optionText, { color: colors.foreground }]}
+          variant="pm"
+          numberOfLines={1}
+        >
+          {option.label}
+        </Text>
+        {selected && <Icon name="Check" size={16} color={colors.foreground} />}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default function Select({
+  style,
+  value,
+  options,
+  onChange,
+  placeholder = 'Select',
+  label,
+  disabled = false,
+  error,
+  hint,
+  title,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const rotation = useSharedValue(0);
+  const { theme, colors } = useTheme();
+  const bottomSheetRef = useRef<BottomSheetProps>(null);
+
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    setIsOpen(true);
+    rotation.value = withTiming(1, { duration: 200 });
+    bottomSheetRef.current?.show();
+  }, [disabled, rotation]);
+
+  const handleClose = useCallback(() => {
+    rotation.value = withTiming(0, { duration: 200 });
+    setIsOpen(false);
+    bottomSheetRef.current?.hide();
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value * 180}deg` }],
+  }));
+
+  const getInputTextColor = useCallback(() => {
+    if (disabled) return convertHexToRgba(colors.foreground, 0.5);
+    return colors.foreground;
+  }, [colors.foreground, disabled]);
+
+  return (
+    <>
+      <View style={style}>
+        <InputContainer
+          onPress={handlePress}
+          disabled={disabled}
+          focused={isOpen}
+          error={error}
+          hint={hint}
+          label={label}
+        >
+          <Text
+            variant="pm"
+            style={[
+              styles.selectText,
+              {
+                color: value
+                  ? getInputTextColor()
+                  : convertHexToRgba(colors.foreground, 0.5),
+                fontFamily: theme.fonts.regular,
+              },
+            ]}
+            numberOfLines={1}
+          >
+            {value?.label ?? placeholder}
+          </Text>
+          <Animated.View style={animatedStyle}>
+            <Icon name="ChevronDown" size={16} color={colors.foreground} />
+          </Animated.View>
+        </InputContainer>
+      </View>
+      <BottomSheet
+        ref={bottomSheetRef}
+        fullScreen={options.length > 20}
+        onBackdropPress={handleClose}
+      >
+        {title && (
+          <Text style={styles.title} variant="h3">
+            {title}
+          </Text>
+        )}
+        <FlatList
+          data={options}
+          contentContainerStyle={styles.list}
+          renderItem={({ item, index }) => (
+            <OptionItem
+              style={[
+                styles.option,
+                { borderRadius: theme.roundness - 2 },
+                index === options.length - 1 && {
+                  marginBottom: theme.insets.bottom + 8,
+                },
+              ]}
+              option={item}
+              selected={value?.value === item.value}
+              onChange={(selectedOption) => {
+                onChange(selectedOption);
+                handleClose();
+              }}
+            />
+          )}
+        />
+      </BottomSheet>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  selectText: { fontSize: 14, flex: 1 },
+  optionContent: {
+    paddingVertical: 8,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+  },
+  optionText: { flex: 1, marginEnd: 16 },
+  firstOption: { paddingTop: 4 },
+  lastOption: { paddingBottom: 6 },
+  option: { paddingBottom: 2 },
+  list: { paddingHorizontal: 8 },
+  title: { marginBottom: 8, marginHorizontal: 16 },
+});

package/src/components/Switch.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import useTheme from '../hooks/useTheme';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+const SWITCH_WIDTH = 44;
+const SWITCH_HEIGHT = 24;
+const PADDING = 2;
+const THUMB_SIZE = SWITCH_HEIGHT - PADDING * 2;
+
+export default function Switch({
+  value,
+  onValueChange,
+  disabled,
+  style,
+}: Props) {
+  const { colors } = useTheme();
+  const active = useSharedValue(value ? 1 : 0);
+  const enabled = useSharedValue(disabled ? 0 : 1);
+
+  useEffect(() => {
+    active.value = withTiming(value ? 1 : 0, {
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+    });
+  }, [value, active]);
+
+  useEffect(() => {
+    enabled.value = withTiming(disabled ? 0 : 1, { duration: 300 });
+  }, [disabled, enabled]);
+
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        active.value,
+        [0, 1],
+        [colors.border, colors.primary]
+      ),
+      opacity: interpolate(enabled.value, [0, 1], [0.5, 1]),
+    };
+  });
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: interpolate(
+            active.value,
+            [0, 1],
+            [PADDING, SWITCH_WIDTH - (THUMB_SIZE + PADDING)]
+          ),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Pressable
+      style={style}
+      onPress={() => onValueChange(!value)}
+      disabled={disabled}
+    >
+      <Animated.View style={[styles.container, containerAnimatedStyle]}>
+        <Animated.View
+          style={[
+            styles.thumb,
+            { backgroundColor: colors.background },
+            thumbAnimatedStyle,
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: SWITCH_WIDTH,
+    height: SWITCH_HEIGHT,
+    borderRadius: SWITCH_HEIGHT,
+    justifyContent: 'center',
+  },
+  thumb: { width: THUMB_SIZE, height: THUMB_SIZE, borderRadius: THUMB_SIZE },
+});

package/src/components/Tabs.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import useTheme from '../hooks/useTheme';
+import { convertHexToRgba } from '../utils/uiUtils';
+import Text from './Text';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+export type Tab = { value: string; label: string };
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  options: Tab[];
+  selected: Tab;
+  onChange: (value: Tab) => void;
+};
+
+export default function Tabs({ options, selected, onChange, style }: Props) {
+  const { theme, colors } = useTheme();
+  const [width, setWidth] = useState<number>(0);
+  const [height, setHeight] = useState<number>(0);
+  const index = useSharedValue<number>(0);
+  const tabWidth = (width - 8) / options.length;
+  const tabHeight = height - 8;
+
+  const tabAnimStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: index.value * tabWidth + 4 }],
+    };
+  }, [tabWidth, index]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <View
+        onLayout={(event) => {
+          const { width: w, height: h } = event.nativeEvent.layout;
+          setWidth(w);
+          setHeight(h);
+        }}
+        style={[
+          styles.tabsList,
+          {
+            backgroundColor: convertHexToRgba(colors.border, 0.5),
+            borderRadius: theme.roundness,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.tab,
+            {
+              height: tabHeight,
+              width: tabWidth,
+              backgroundColor: colors.background,
+              borderColor: colors.border,
+            },
+            theme.roundness >= 2 && { borderRadius: theme.roundness - 2 },
+            tabAnimStyle,
+          ]}
+        />
+        {options.map((tab, _index) => (
+          <Pressable
+            key={tab.value}
+            style={styles.tabTrigger}
+            onPress={() => {
+              index.value = withTiming(_index, {
+                duration: 250,
+                easing: Easing.ease,
+              });
+              onChange(tab);
+            }}
+          >
+            <Text
+              variant="h4"
+              numberOfLines={1}
+              style={{
+                color:
+                  selected.value === tab.value
+                    ? colors.foreground
+                    : convertHexToRgba(colors.foreground, 0.6),
+              }}
+            >
+              {tab.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width: '100%' },
+  tabsList: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+  },
+  tabTrigger: {
+    flex: 1,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+  },
+  tab: { position: 'absolute', top: 4, borderWidth: 1 },
+});

package/src/components/Text.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text as RNText, type TextProps } from 'react-native';
+
+import useTheme from '../hooks/useTheme';
+
+type Props = TextProps & {
+  variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'pl' | 'pm' | 'ps' | 'caption';
+};
+
+export default function Text({ variant, style, children, ...props }: Props) {
+  const { theme, colors } = useTheme();
+
+  const color = useMemo(
+    () => StyleSheet.flatten(style)?.color ?? colors.foreground,
+    [colors.foreground, style]
+  );
+
+  const textStyle = useMemo(() => {
+    return {
+      h1: {
+        fontSize: 24,
+        fontFamily: theme.fonts.bold,
+      },
+      h2: {
+        fontSize: 18,
+        fontFamily: theme.fonts.medium,
+      },
+      h3: {
+        fontSize: 16,
+        fontFamily: theme.fonts.medium,
+      },
+      h4: {
+        fontSize: 14,
+        fontFamily: theme.fonts.medium,
+      },
+      h5: {
+        fontSize: 12,
+        fontFamily: theme.fonts.medium,
+      },
+      pl: {
+        fontSize: 16,
+        fontFamily: theme.fonts.regular,
+      },
+      pm: {
+        fontSize: 14,
+        fontFamily: theme.fonts.regular,
+      },
+      ps: {
+        fontSize: 12,
+        fontFamily: theme.fonts.regular,
+      },
+      caption: {
+        fontSize: 10,
+        fontFamily: theme.fonts.regular,
+      },
+    }[variant];
+  }, [variant, theme.fonts.bold, theme.fonts.medium, theme.fonts.regular]);
+
+  return (
+    <RNText {...props} style={[style, textStyle, { color }]}>
+      {children}
+    </RNText>
+  );
+}