@space-uy/pulsar-ui 0.2.0

package/src/components/Accordion.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type ViewStyle,
+  type StyleProp,
+  Platform,
+  type LayoutChangeEvent,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+  interpolate,
+} from 'react-native-reanimated';
+
+import useTheme from '../hooks/useTheme';
+import Text from './Text';
+import Icon from './Icon';
+import { convertHexToRgba } from '../utils/uiUtils';
+
+export type AccordionItemProps = {
+  title: string;
+  children: React.ReactNode;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+  style?: StyleProp<ViewStyle>;
+  value?: string;
+};
+
+export type AccordionProps = {
+  type?: 'single' | 'multiple';
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function AccordionItem({
+  title,
+  children,
+  isExpanded = false,
+  onToggle,
+  style,
+}: AccordionItemProps) {
+  const { colors } = useTheme();
+  const pressed = useSharedValue(0);
+  const rotation = useSharedValue(0);
+  const height = useSharedValue(0);
+  const opacity = useSharedValue(0);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const itemStyle = useMemo(
+    () => ({
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+      backgroundColor: colors.background,
+    }),
+    [colors]
+  );
+
+  const pressedColor = convertHexToRgba(colors.border, 0.5);
+
+  const animatedTriggerStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        pressed.value,
+        [0, 1],
+        [colors.background, pressedColor]
+      ),
+    };
+  });
+
+  const animatedChevronStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate: `${interpolate(rotation.value, [0, 1], [0, 180])}deg`,
+        },
+      ],
+    };
+  });
+
+  const animatedContentStyle = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+      opacity: opacity.value,
+    };
+  });
+
+  const updatePressAnimation = (value: number) => {
+    pressed.value = withTiming(value, { duration: 200 });
+  };
+
+  const handlePressIn = () => {
+    Platform.OS !== 'web' && updatePressAnimation(1);
+  };
+
+  const handlePressOut = () => {
+    Platform.OS !== 'web' && updatePressAnimation(0);
+  };
+
+  useEffect(() => {
+    rotation.value = withTiming(isExpanded ? 1 : 0, { duration: 200 });
+  }, [isExpanded, rotation]);
+
+  useEffect(() => {
+    if (contentHeight > 0) {
+      height.value = withTiming(isExpanded ? contentHeight : 0, {
+        duration: 250,
+      });
+      opacity.value = withTiming(isExpanded ? 1 : 0, { duration: 200 });
+    }
+  }, [isExpanded, contentHeight, height, opacity]);
+
+  const handleContentLayout = (event: LayoutChangeEvent) => {
+    const { height: layoutHeight } = event.nativeEvent.layout;
+    if (layoutHeight > 0 && contentHeight !== layoutHeight) {
+      setContentHeight(layoutHeight);
+      if (isExpanded) {
+        height.value = layoutHeight;
+        opacity.value = 1;
+      } else {
+        height.value = 0;
+        opacity.value = 0;
+      }
+    }
+  };
+
+  return (
+    <View style={[itemStyle, style]}>
+      <Pressable
+        style={styles.trigger}
+        onPress={onToggle}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onHoverIn={() => updatePressAnimation(1)}
+        onHoverOut={() => updatePressAnimation(0)}
+      >
+        <Animated.View style={[styles.triggerContent, animatedTriggerStyle]}>
+          <Text
+            variant="h4"
+            style={[styles.title, { color: colors.foreground }]}
+          >
+            {title}
+          </Text>
+          <Animated.View style={[styles.chevron, animatedChevronStyle]}>
+            <Icon name="ChevronDown" size={20} color={colors.foreground} />
+          </Animated.View>
+        </Animated.View>
+      </Pressable>
+
+      <View>
+        <View style={styles.hiddenContent} onLayout={handleContentLayout}>
+          <View style={styles.content}>{children}</View>
+        </View>
+
+        {contentHeight > 0 && (
+          <Animated.View
+            style={[styles.contentContainer, animatedContentStyle]}
+          >
+            <View style={styles.content}>{children}</View>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+export default function Accordion({
+  type = 'single',
+  collapsible = false,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  style,
+}: AccordionProps) {
+  const { colors, theme } = useTheme();
+
+  const getInitialExpandedItems = (): Set<string> => {
+    if (controlledValue !== undefined) {
+      return new Set(
+        Array.isArray(controlledValue) ? controlledValue : [controlledValue]
+      );
+    }
+    if (defaultValue !== undefined) {
+      return new Set(
+        Array.isArray(defaultValue) ? defaultValue : [defaultValue]
+      );
+    }
+    return new Set();
+  };
+
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(
+    getInitialExpandedItems
+  );
+
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setExpandedItems(
+        new Set(
+          Array.isArray(controlledValue) ? controlledValue : [controlledValue]
+        )
+      );
+    }
+  }, [controlledValue]);
+
+  const toggleItem = (value: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+
+      if (type === 'single') {
+        if (newSet.has(value)) {
+          if (collapsible) {
+            newSet.clear();
+          }
+        } else {
+          newSet.clear();
+          newSet.add(value);
+        }
+      } else if (newSet.has(value)) {
+        newSet.delete(value);
+      } else {
+        newSet.add(value);
+      }
+
+      const newValue =
+        type === 'single' ? Array.from(newSet)[0] || '' : Array.from(newSet);
+
+      onValueChange?.(newValue);
+      return newSet;
+    });
+  };
+
+  const accordionStyle = useMemo(
+    () => ({
+      backgroundColor: colors.background,
+      borderRadius: theme.roundness,
+      borderWidth: 1,
+      borderColor: colors.border,
+      overflow: 'hidden' as const,
+    }),
+    [colors, theme]
+  );
+
+  const accordionItems = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child)) {
+      const value = child.props.value || `item-${index}`;
+      return React.cloneElement(
+        child as React.ReactElement<AccordionItemProps>,
+        {
+          isExpanded: expandedItems.has(value),
+          onToggle: () => toggleItem(value),
+          key: value,
+        }
+      );
+    }
+    return child;
+  });
+
+  return <View style={[accordionStyle, style]}>{accordionItems}</View>;
+}
+
+const styles = StyleSheet.create({
+  trigger: { overflow: 'hidden' },
+  triggerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 24,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  chevron: { marginLeft: 8, justifyContent: 'center', alignItems: 'center' },
+  content: { paddingHorizontal: 16, paddingBottom: 16, overflow: 'hidden' },
+  contentContainer: { overflow: 'hidden' },
+  hiddenContent: { position: 'absolute', opacity: 0, zIndex: -1 },
+  title: { flex: 1 },
+});

package/src/components/BottomSheet.tsx

@@ -0,0 +1,259 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+  type LayoutChangeEvent,
+} from 'react-native';
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+
+type Props = PropsWithChildren & {
+  onBackdropPress?: () => void;
+  fullScreen?: boolean;
+};
+
+export type BottomSheetProps = {
+  show: () => void;
+  hide: () => void;
+  isActive: boolean;
+};
+
+const BottomSheet = forwardRef<BottomSheetProps, Props>(
+  (
+    { onBackdropPress = () => {}, children, fullScreen = false }: Props,
+    ref
+  ) => {
+    const [height, setHeight] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const contentRef = useRef<View>(null);
+    const { colors, theme } = useTheme();
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const offset = useSharedValue(screenHeight);
+    const opacity = useSharedValue(0);
+
+    useImperativeHandle(ref, () => ({
+      show: () => setVisible(true),
+      hide: () => runAnimation(false),
+      isActive: visible,
+    }));
+
+    const transformAnimationStyle = useAnimatedStyle(() => {
+      return {
+        borderTopRightRadius: interpolate(
+          offset.value,
+          [0, screenHeight * 0.2],
+          [0, 20],
+          Extrapolation.CLAMP
+        ),
+        borderTopLeftRadius: interpolate(
+          offset.value,
+          [0, theme.insets.top + 150],
+          [0, 20],
+          Extrapolation.CLAMP
+        ),
+        transform: [{ translateY: offset.value }],
+      };
+    });
+
+    const handleContainerAnimStyle = useAnimatedStyle(() => {
+      return {
+        paddingTop: interpolate(
+          offset.value,
+          [0, 100],
+          [theme.insets.top + 16, 8],
+          Extrapolation.CLAMP
+        ),
+      };
+    });
+
+    const handleAnimStyle = useAnimatedStyle(() => {
+      return {
+        width: interpolate(
+          offset.value,
+          [0, 100],
+          [80, 40],
+          Extrapolation.CLAMP
+        ),
+      };
+    });
+
+    const opacityAnimatedStyle = useAnimatedStyle(() => {
+      return {
+        opacity: opacity.value,
+      };
+    });
+
+    const handleLayout = (e: LayoutChangeEvent) => {
+      setHeight(e.nativeEvent.layout.height);
+    };
+
+    const getAnimationValue = (
+      value: number,
+      easing: (value: number) => number,
+      closeOnFinish = false
+    ) => {
+      const config = { duration: 300, easing };
+      // If we don't do it like this, the app throw an error regarding de value returned
+      if (closeOnFinish) {
+        return withTiming(value, config, () => {
+          runOnJS(setVisible)(false);
+        });
+      }
+      return withTiming(value, config);
+    };
+
+    const runAnimation = useCallback(
+      (isOpenAnim: boolean) => {
+        const coordY = isOpenAnim ? screenHeight - height : screenHeight;
+        const easing = isOpenAnim
+          ? Easing.out(Easing.exp)
+          : Easing.in(Easing.exp);
+        offset.value = getAnimationValue(coordY, easing);
+        opacity.value = getAnimationValue(
+          isOpenAnim ? 1 : 0,
+          easing,
+          !isOpenAnim
+        );
+      },
+      [height, offset, opacity, screenHeight]
+    );
+
+    const panGesture = Gesture.Pan()
+      .onUpdate((event) => {
+        if (event.translationY > 0) {
+          offset.value = screenHeight - height + event.translationY;
+        }
+      })
+      .onEnd((event) => {
+        if (event.translationY > height * 0.3) {
+          offset.value = withTiming(screenHeight, { duration: 300 }, () => {
+            runOnJS(setVisible)(false);
+            runOnJS(onBackdropPress)();
+          });
+          opacity.value = withTiming(0, { duration: 300 });
+        } else {
+          offset.value = withTiming(screenHeight - height, { duration: 300 });
+        }
+      });
+
+    const handleBackdropPress = () => {
+      onBackdropPress?.();
+      runAnimation(false);
+    };
+
+    useEffect(() => {
+      if (visible && height > 0) {
+        runAnimation(true);
+      }
+    }, [height, runAnimation, visible]);
+
+    return (
+      /*
+        Need to wrap the modal with a View because there's a strange behavior in Android currently
+        which is not registering onPress events on components inside the modal. It seems to be something
+        related to the new architecture implementation on Andoid, change it once the issue is fixed.
+        See related issues: 
+          - https://github.com/react-native-modal/react-native-modal/issues/737
+          - https://github.com/facebook/react-native/issues/36710
+          - https://github.com/facebook/react-native/issues/44643
+      */
+      <View>
+        <Modal
+          transparent
+          statusBarTranslucent
+          visible={visible}
+          onShow={() => runAnimation(true)}
+        >
+          {/* 
+            Need to wrap with GestureHandlerRootView to make gesture handling work on Android.
+            This is required because React Native Gesture Handler needs a root view to properly
+            handle gestures on Android devices.
+            https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation#android
+          */}
+          <GestureHandlerRootView>
+            <TouchableWithoutFeedback onPress={handleBackdropPress}>
+              <Animated.View
+                style={[
+                  StyleSheet.absoluteFill,
+                  opacityAnimatedStyle,
+                  { backgroundColor: convertHexToRgba(colors.foreground, 0.1) },
+                ]}
+              />
+            </TouchableWithoutFeedback>
+            <GestureDetector gesture={panGesture}>
+              <Animated.View
+                ref={contentRef}
+                onLayout={handleLayout}
+                style={[
+                  styles.contentContainer,
+                  { backgroundColor: colors.background, width: screenWidth },
+                  transformAnimationStyle,
+                  fullScreen
+                    ? { height: screenHeight }
+                    : { maxHeight: screenHeight * 0.8 },
+                ]}
+              >
+                <Animated.View
+                  style={[
+                    handleContainerAnimStyle,
+                    { width: screenWidth },
+                    styles.handleContainer,
+                  ]}
+                >
+                  <Animated.View
+                    style={[
+                      styles.handle,
+                      { backgroundColor: colors.border },
+                      handleAnimStyle,
+                    ]}
+                  />
+                </Animated.View>
+                {children}
+              </Animated.View>
+            </GestureDetector>
+          </GestureHandlerRootView>
+        </Modal>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  contentContainer: { overflow: 'hidden' },
+  handle: { height: 8, borderRadius: 8, alignSelf: 'center' },
+  handleContainer: {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 16,
+  },
+});
+
+export default BottomSheet;

package/src/components/Button.tsx

@@ -0,0 +1,85 @@
+import { StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+
+import ButtonContainer, {
+  type ButtonVariant,
+  type ButtonSize,
+  type ButtonColors,
+} from './ButtonContainer';
+import LoadingIndicator from './LoadingIndicator';
+import Text from './Text';
+import Icon, { type IconName } from './Icon';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  text: string;
+  variant?: keyof typeof ButtonVariant;
+  size?: keyof typeof ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  iconName?: IconName;
+};
+
+export default function Button({
+  text,
+  style,
+  variant = 'flat',
+  size = 'large',
+  loading = false,
+  disabled = false,
+  onPress,
+  iconName,
+}: Props) {
+  const renderIconOrLoader = (colors: ButtonColors) => {
+    if (loading) {
+      return (
+        <LoadingIndicator
+          style={styles.icon}
+          color={colors.textColor}
+          size={size === 'small' ? 14 : 16}
+        />
+      );
+    }
+    return iconName ? (
+      <Icon
+        style={styles.icon}
+        name={iconName}
+        size={16}
+        color={colors.textColor}
+      />
+    ) : null;
+  };
+
+  return (
+    <ButtonContainer
+      style={style}
+      contentContainerStyle={styles.content}
+      variant={variant}
+      size={size}
+      loading={loading}
+      disabled={disabled}
+      onPress={onPress}
+      renderContent={(colors: ButtonColors) => (
+        <>
+          {renderIconOrLoader(colors)}
+          <Text
+            style={{ color: colors.textColor }}
+            variant={size === 'small' ? 'h5' : 'h4'}
+          >
+            {text}
+          </Text>
+        </>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: { marginRight: 8 },
+});