@space-uy/pulsar-ui 0.2.0

package/src/components/IconButton.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import {
+  StyleSheet,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import ButtonContainer, {
+  type ButtonVariant,
+  type ButtonSize,
+  type ButtonColors,
+} from './ButtonContainer';
+import Icon, { type IconName } from './Icon';
+import LoadingIndicator from './LoadingIndicator';
+
+import meassures from '../theme/meassures';
+
+type Props = PressableProps & {
+  iconName: IconName;
+  variant?: keyof typeof ButtonVariant;
+  size?: keyof typeof ButtonSize;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+const PADDING = 8;
+
+export default function IconButton({
+  iconName,
+  onPress,
+  size = 'medium',
+  disabled = false,
+  variant = 'flat',
+  loading = false,
+  style,
+  ...rest
+}: Props) {
+  const iconSize = useMemo(
+    () => meassures.button[size] - (size === 'small' ? PADDING : PADDING * 2),
+    [size]
+  );
+
+  return (
+    <ButtonContainer
+      {...rest}
+      variant={variant}
+      size={size}
+      loading={loading}
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={{ top: PADDING, left: PADDING, right: PADDING, bottom: PADDING }}
+      style={[style, { width: meassures.button[size] }]}
+      contentContainerStyle={[
+        styles.container,
+        { padding: size === 'small' ? PADDING / 2 : PADDING },
+      ]}
+      renderContent={(colors: ButtonColors) =>
+        loading ? (
+          <LoadingIndicator size={iconSize} color={colors.textColor} />
+        ) : (
+          <Icon name={iconName} size={iconSize} color={colors.textColor} />
+        )
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center', justifyContent: 'center' },
+});

package/src/components/Input.tsx

@@ -0,0 +1,144 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import {
+  TextInput,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextInputProps,
+  type TextInputFocusEventData,
+  type NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
+
+import InputContainer from './InputContainer';
+import IconButton from './IconButton';
+import { type IconName } from './Icon';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+
+type Props = TextInputProps & {
+  style?: StyleProp<ViewStyle>;
+  error?: boolean;
+  label?: string;
+  hint?: string;
+  iconName?: IconName;
+  variant?: 'text' | 'password';
+  clearable?: boolean;
+};
+
+export type InputRef = { focus: () => void; blur: () => void };
+
+export const Input = forwardRef<InputRef, Props>(
+  (
+    {
+      style,
+      onChangeText,
+      value,
+      editable = true,
+      error,
+      label,
+      hint,
+      variant = 'text',
+      onBlur,
+      onFocus,
+      iconName,
+      clearable = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [focused, setFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const { colors, theme } = useTheme();
+    const inputRef = useRef<TextInput>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+    }));
+
+    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const renderRightButton = (name: IconName, onPress: () => void) => (
+      <IconButton
+        style={styles.button}
+        iconName={name}
+        size="small"
+        variant="transparent"
+        onPress={onPress}
+        disabled={!editable}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      />
+    );
+
+    return (
+      <InputContainer
+        style={style}
+        label={label}
+        hint={hint}
+        error={error}
+        onPress={() => inputRef.current?.focus()}
+        contentContainerStyle={styles.container}
+        focused={focused}
+        disabled={!editable}
+        iconName={iconName}
+      >
+        <TextInput
+          {...rest}
+          value={value}
+          onChangeText={onChangeText}
+          ref={inputRef}
+          style={[
+            styles.input,
+            {
+              fontFamily: theme.fonts.regular,
+              color: colors.foreground,
+              // @ts-ignore
+              caretColor: colors.primary, // This to make the cursor color match the primary color on web
+            },
+            Platform.OS === 'web' && styles.webInput,
+          ]}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={convertHexToRgba(colors.foreground, 0.5)}
+          editable={editable}
+          secureTextEntry={variant === 'password' && !showPassword}
+          cursorColor={colors.primary}
+          selectionColor={convertHexToRgba(
+            colors.primary,
+            Platform.OS === 'android' ? 0.15 : 1
+          )}
+          selectionHandleColor={colors.primary}
+        />
+        {clearable &&
+          value &&
+          variant !== 'password' &&
+          renderRightButton('CircleX', () => onChangeText?.(''))}
+        {variant === 'password' &&
+          renderRightButton(showPassword ? 'EyeClosed' : 'Eye', () =>
+            setShowPassword(!showPassword)
+          )}
+      </InputContainer>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', alignItems: 'center' },
+  input: { flex: 1, fontSize: 14 },
+  button: { marginStart: 8, opacity: 0.8 },
+  icon: { marginEnd: 8 },
+  webInput: { outlineWidth: 0 } as ViewStyle, // To remove native focus outline on web
+});
+
+export default Input;

package/src/components/InputContainer.tsx

@@ -0,0 +1,134 @@
+import { type PropsWithChildren, useEffect, useMemo } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Text from './Text';
+import Icon, { type IconName } from './Icon';
+import useTheme from '../hooks/useTheme';
+import { convertHexToRgba } from '../utils/uiUtils';
+
+type Props = PropsWithChildren & {
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  error?: boolean;
+  hint?: string;
+  label?: string;
+  onPress: () => void;
+  focused?: boolean;
+  disabled?: boolean;
+  size?: 'small' | 'default';
+  height?: number;
+  iconName?: IconName;
+};
+
+export type InputRef = { focus: () => void };
+
+const INACTIVE = -1;
+const ACTIVE = 0;
+const ERROR = 1;
+
+export default function InputContainer({
+  style,
+  contentContainerStyle,
+  error,
+  hint,
+  label,
+  onPress,
+  focused,
+  children,
+  size = 'default',
+  disabled,
+  height,
+  iconName,
+}: Props) {
+  const status = useSharedValue(INACTIVE);
+  const isFocused = useSharedValue(0);
+  const { colors, theme } = useTheme();
+
+  const animStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(
+      status.value,
+      [INACTIVE, ACTIVE, ERROR],
+      [colors.border, colors.primary, colors.destructive]
+    ),
+  }));
+
+  const iconAnimStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(isFocused.value, [0, 1], [1, 0]),
+      width: interpolate(isFocused.value, [0, 1], [24, 0]),
+    };
+  });
+
+  useEffect(() => {
+    const _status = focused ? ACTIVE : INACTIVE;
+    status.value = withTiming(error ? ERROR : _status, { duration: 300 });
+    isFocused.value = withTiming(focused ? 1 : 0, { duration: 300 });
+  }, [error, status, focused, isFocused]);
+
+  const containerHeight = useMemo(
+    () => height ?? (size === 'small' ? 32 : 40),
+    [size, height]
+  );
+
+  return (
+    <View style={[style, disabled && styles.disabled]}>
+      {!!label && (
+        <Text style={[{ color: colors.foreground }, styles.label]} variant="h5">
+          {label}
+        </Text>
+      )}
+      <Pressable onPress={onPress} disabled={disabled}>
+        <Animated.View
+          style={[
+            animStyle,
+            styles.container,
+            { height: containerHeight, borderRadius: theme.roundness },
+            contentContainerStyle,
+          ]}
+        >
+          {iconName && (
+            <Animated.View style={iconAnimStyle}>
+              <Icon
+                name={iconName}
+                size={16}
+                color={convertHexToRgba(colors.foreground, 0.5)}
+              />
+            </Animated.View>
+          )}
+          {children}
+        </Animated.View>
+      </Pressable>
+      {((hint && !error) || (error && hint)) && (
+        <Text style={styles.hint} variant="caption">
+          {hint}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hint: { marginHorizontal: 8, marginTop: 4 },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: 12,
+    borderWidth: 1,
+  },
+  disabled: { opacity: 0.5 },
+  label: { marginBottom: 4 },
+});

package/src/components/LoadingIndicator.tsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  useSharedValue,
+  Easing,
+} from 'react-native-reanimated';
+
+import useTheme from '../hooks/useTheme';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  color?: string;
+  size?: number;
+};
+
+export default function LoadingIndicator({ style, color, size = 24 }: Props) {
+  const rotation = useSharedValue(0);
+  const { colors } = useTheme();
+  const borderColor = color ?? colors.foreground;
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return { transform: [{ rotate: `${rotation.value}deg` }] };
+  });
+
+  return (
+    <View style={[styles.container, { width: size, height: size }, style]}>
+      {/* Workaround for Android because of this issue: https://github.com/facebook/react-native/issues/38335 */}
+      {Platform.OS === 'android' ? (
+        <ActivityIndicator size={size} color={borderColor} />
+      ) : (
+        <Animated.View
+          style={[
+            styles.circle,
+            {
+              borderTopColor: borderColor,
+              borderLeftColor: borderColor,
+              borderBottomColor: borderColor,
+            },
+            animatedStyle,
+          ]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 999,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderRightColor: 'transparent',
+  },
+});

package/src/components/OtpInput.tsx

@@ -0,0 +1,109 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  type NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  type TextInputProps,
+  type TextInputKeyPressEventData,
+} from 'react-native';
+import { convertHexToRgba } from '../utils/uiUtils';
+import useTheme from '../hooks/useTheme';
+
+export const OtpInput = forwardRef<TextInput, TextInputProps>(
+  (
+    {
+      placeholder = '*',
+      style,
+      onChangeText,
+      onKeyPress,
+      editable = true,
+      ...rest
+    }: TextInputProps,
+    ref
+  ) => {
+    const innerRef = useRef<TextInput>(null);
+    const [value, setValue] = useState<string>('');
+    const [innerPlaceholder, setInnerPlaceholder] =
+      useState<string>(placeholder);
+    const { colors } = useTheme();
+
+    useImperativeHandle(ref, () => innerRef.current as TextInput);
+
+    const onFocus = useCallback(() => setInnerPlaceholder(''), []);
+
+    const onBlur = useCallback(() => {
+      if (!value?.length) {
+        setInnerPlaceholder(placeholder);
+      }
+    }, [placeholder, value?.length]);
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        const regex = /^\d+$/;
+        if (regex.test(text)) {
+          setValue(text);
+          onChangeText?.(text);
+        } else {
+          innerRef.current?.setNativeProps({ text: '' });
+        }
+      },
+      [onChangeText]
+    );
+
+    const handleKeyPress = useCallback(
+      (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        if (event.nativeEvent.key === 'Backspace') {
+          setValue('');
+          innerRef.current?.setNativeProps({ text: '' });
+          if (!innerRef?.current?.isFocused()) {
+            innerRef.current?.setNativeProps({ placeholder: innerPlaceholder });
+          }
+        }
+        onKeyPress?.(event);
+      },
+      [innerPlaceholder, onKeyPress]
+    );
+
+    return (
+      <TextInput
+        ref={innerRef}
+        {...rest}
+        placeholderTextColor={convertHexToRgba(colors.foreground, 0.5)}
+        style={[
+          styles.container,
+          style,
+          { backgroundColor: colors.background },
+        ]}
+        placeholder={innerPlaceholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onChangeText={handleChangeText}
+        maxLength={1}
+        onKeyPress={handleKeyPress}
+        keyboardType="number-pad"
+        editable={editable}
+        textAlignVertical="center"
+        textAlign="center"
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 10,
+    fontWeight: 'normal',
+    borderWidth: 1,
+    borderRadius: 8,
+    height: 71,
+    width: 80,
+  },
+});