@edge-zuq/core 1.2.7

package/src/presentation/components/atoms/UILoading.tsx

@@ -0,0 +1,17 @@
+import { ActivityIndicator } from 'react-native';
+import React from 'react';
+import { getThemeColor, type ThemeColor } from '../../../theme';
+
+type Props = React.ComponentProps<typeof ActivityIndicator> & {
+  color?: ThemeColor;
+};
+
+export const UILoading = ({
+  color: themeColor = 'brand-violet-500',
+  size = 32,
+  ...props
+}: Props) => {
+  const color = getThemeColor(themeColor);
+
+  return <ActivityIndicator color={color} size={size} {...props} />;
+};

package/src/presentation/components/atoms/UIPage.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { StatusBar as RNStatusBar, StyleSheet } from 'react-native';
+import type { ColorValue, StatusBarStyle } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UIStack } from './UIStack';
+import { theme } from '../../../theme';
+
+export type StatusBar = {
+  color?: string;
+  style?: StatusBarStyle;
+};
+
+type Props = Omit<
+  React.ComponentProps<typeof KeyboardAvoidingView>,
+  'contentContainerStyle'
+> & {
+  fullWidth?: boolean;
+  center?: boolean;
+  dark?: boolean;
+  background?: ColorValue;
+  statusBar?: StatusBar;
+  children?: React.ReactNode;
+  appBar?: React.ReactNode;
+  behavior?: 'height' | 'padding';
+};
+
+export const UIPage = ({
+  children,
+  fullWidth,
+  center,
+  dark,
+  style,
+  background = '#fff',
+  statusBar = {
+    color: '#fff',
+    style: 'dark-content',
+  },
+  appBar,
+  ...props
+}: Props) => {
+  const insets = useSafeAreaInsets();
+
+  const hasHorizontalInset = Boolean(insets.left) || Boolean(insets.right);
+
+  React.useEffect(() => {
+    const stackEntry = RNStatusBar.pushStackEntry({
+      backgroundColor: statusBar.color,
+      barStyle: statusBar.style,
+    });
+    return () => {
+      if (stackEntry) RNStatusBar.popStackEntry(stackEntry);
+    };
+  }, [statusBar.color, statusBar.style]);
+
+  return (
+    <UIStack
+      spacing={0}
+      flex={1}
+      style={{
+        paddingTop: insets.top,
+      }}
+    >
+      {appBar}
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={[
+          styles.page,
+          center && styles.center,
+          !fullWidth && styles.withPadding,
+          dark && styles.dark,
+          hasHorizontalInset && {
+            paddingHorizontal: insets.left || insets.right,
+          },
+          { paddingBottom: Math.max(insets.bottom, 32) },
+          !dark && { backgroundColor: background },
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: '#fff' },
+  center: { justifyContent: 'center' },
+  withPadding: { paddingHorizontal: 24 },
+  dark: { backgroundColor: theme.color.brand.violet['500'] },
+});

package/src/presentation/components/atoms/UIProgress.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { theme } from '../../../theme';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+type Props = {
+  progress: number;
+  outerStyle?: StyleProp<ViewStyle>;
+  innerStyle?: StyleProp<ViewStyle>;
+};
+
+export const UIProgress = React.memo(
+  ({ progress, innerStyle, outerStyle }: Props) => {
+    const [width, setWidth] = React.useState(0);
+    const progressValue = useSharedValue(progress);
+    const animatedStyles = useAnimatedStyle(() => ({
+      transform: [{ translateX: -width * (1 - progressValue.value) }],
+    }));
+
+    React.useEffect(() => {
+      progressValue.value = withTiming(progress);
+    }, [progress, progressValue]);
+
+    return (
+      <View style={styles.wrapper}>
+        <View
+          onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
+          style={[styles.outer, outerStyle]}
+        >
+          <Animated.View style={[styles.inner, animatedStyles, innerStyle]} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  outer: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'hidden',
+    backgroundColor: theme.color.neutral.light['50'],
+    height: 4,
+    borderRadius: 2,
+  },
+  inner: {
+    position: 'absolute',
+    backgroundColor: theme.color.brand.violet['500'],
+    height: 4,
+    width: '100%',
+  },
+});

package/src/presentation/components/atoms/UIScrollPage.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StatusBar as RNStatusBar, StyleSheet } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UIStack } from './UIStack';
+import { theme } from '../../../theme';
+import type { StatusBar } from './UIPage';
+
+type Props = React.ComponentProps<typeof KeyboardAwareScrollView> & {
+  fullWidth?: boolean;
+  center?: boolean;
+  dark?: boolean;
+  background?: ColorValue;
+  statusBar?: StatusBar;
+  children?: React.ReactNode;
+  appBar?: React.ReactNode;
+  behavior?: 'height' | 'padding';
+};
+
+export const UIScrollPage = ({
+  children,
+  fullWidth,
+  center,
+  dark,
+  style,
+  background = '#fff',
+  statusBar = {
+    color: '#fff',
+    style: 'dark-content',
+  },
+  appBar,
+  keyboardShouldPersistTaps = 'handled',
+  ...props
+}: Props) => {
+  const insets = useSafeAreaInsets();
+
+  const hasHorizontalInset = Boolean(insets.left) || Boolean(insets.right);
+
+  React.useEffect(() => {
+    const stackEntry = RNStatusBar.pushStackEntry({
+      backgroundColor: statusBar.color,
+      barStyle: statusBar.style,
+    });
+    return () => {
+      if (stackEntry) RNStatusBar.popStackEntry(stackEntry);
+    };
+  }, [statusBar.color, statusBar.style]);
+
+  return (
+    <UIStack
+      spacing={0}
+      flex={1}
+      style={{
+        paddingTop: insets.top,
+      }}
+    >
+      {appBar}
+      <KeyboardAwareScrollView
+        behavior="padding"
+        style={[
+          styles.page,
+          center && styles.center,
+          !fullWidth && styles.withPadding,
+          dark && styles.dark,
+          hasHorizontalInset && {
+            paddingHorizontal: insets.left || insets.right,
+          },
+          { paddingBottom: Math.max(insets.bottom, 32) },
+          !dark && { backgroundColor: background },
+          style,
+        ]}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        {...props}
+      >
+        {children}
+      </KeyboardAwareScrollView>
+    </UIStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: { flex: 1, backgroundColor: '#fff' },
+  center: { justifyContent: 'center' },
+  withPadding: { paddingHorizontal: 24 },
+  dark: { backgroundColor: theme.color.brand.violet['500'] },
+});

package/src/presentation/components/atoms/UISeparator.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { getThemeColor, theme, type ThemeColor } from '../../../theme';
+
+type Props = React.ComponentProps<typeof View> & {
+  horizontal?: boolean;
+  color?: ThemeColor;
+};
+
+export const UISeparator = ({
+  horizontal = true,
+  style,
+  color: themeColor,
+  ...props
+}: Props) => {
+  const color = getThemeColor(themeColor);
+
+  return (
+    <View
+      style={[
+        styles.separator,
+        {
+          [horizontal ? 'height' : 'width']: 1,
+        },
+        color && {
+          backgroundColor: color,
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  separator: {
+    alignSelf: 'stretch',
+    backgroundColor: theme.color.neutral.mid['60'],
+    opacity: 0.2,
+  },
+});

package/src/presentation/components/atoms/UISpacer.tsx

@@ -0,0 +1,21 @@
+import { View } from 'react-native';
+import { theme } from '../../../theme';
+import type { ThemeSpacing } from '../../../theme';
+
+type Props = {
+  horizontal?: boolean;
+  size?: ThemeSpacing;
+  value?: number;
+};
+
+export const UISpacer = ({ value = 2, horizontal, size = 'sm' }: Props) => {
+  return (
+    <View
+      style={
+        horizontal
+          ? { width: value * theme.spacing[size] }
+          : { height: value * theme.spacing[size] }
+      }
+    />
+  );
+};

package/src/presentation/components/atoms/UIStack.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { theme, type ThemeSpacing } from '../../../theme';
+
+type Props = React.ComponentProps<typeof View> & {
+  horizontal?: boolean;
+  center?: boolean;
+  justify?: ViewStyle['justifyContent'];
+  size?: ThemeSpacing;
+  spacing?: number;
+  flex?: number;
+};
+
+export const UIStack = ({
+  horizontal = false,
+  spacing = 2,
+  size = 'sm',
+  justify,
+  center,
+  style,
+  flex,
+  children,
+  ...props
+}: Props) => {
+  return (
+    <View
+      style={[
+        {
+          flexDirection: horizontal ? 'row' : 'column',
+          alignItems: center ? 'center' : 'stretch',
+          justifyContent: justify,
+          gap: theme.spacing[size] * spacing,
+        },
+        Boolean(flex) && {
+          flex,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};

package/src/presentation/components/atoms/UIText.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, Text } from 'react-native';
+import React from 'react';
+import type { TextStyle } from 'react-native';
+import { getThemeColor, theme, type ThemeColor } from '../../../theme';
+
+type Props = React.ComponentProps<typeof Text> & {
+  variant?: 'title' | 'subtitle' | 'body' | 'label';
+  color?: ThemeColor;
+  align?: TextStyle['textAlign'];
+  weight?: TextStyle['fontWeight'];
+  size?: TextStyle['fontSize'];
+};
+
+export const UIText = ({
+  children,
+  style,
+  variant = 'body',
+  color: themeColor = 'neutral-dark-80',
+  align = 'left',
+  size,
+  weight,
+  ...props
+}: Props) => {
+  if (['title', 'subtitle'].includes(variant) && !weight) weight = '600';
+  if (!weight) weight = 'normal';
+
+  const color = getThemeColor(themeColor);
+
+  return (
+    <Text
+      style={[
+        styles[variant],
+        color && { color },
+        align && { textAlign: align },
+        weight && { fontFamily: theme.font.weight[weight] },
+        Boolean(size) && {
+          fontSize: size,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 26,
+  },
+  subtitle: { fontSize: 20 },
+  body: {
+    fontSize: 14,
+  },
+  label: {
+    fontSize: 14,
+  },
+});

package/src/presentation/components/atoms/index.ts

@@ -0,0 +1,12 @@
+export * from './UIPage';
+export * from './UIText';
+export * from './UISpacer';
+export * from './UISeparator';
+export * from './UIBackdrop';
+export * from './UIDot';
+export * from './UILoading';
+export * from './UIIcon';
+export * from './UIStack';
+export * from './UIProgress';
+export * from './UIScrollPage';
+export * from './UICheckbox';

package/src/presentation/components/index.ts

@@ -0,0 +1 @@
+export * from './permissions';

package/src/presentation/components/molecules/UIActionSheet.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { BackHandler, Keyboard, StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Portal } from '@gorhom/portal';
+
+import { UIBackdrop, UIIcon, UIStack, UIText } from '../atoms';
+import { UIButton } from './UIButton';
+import { theme } from '../../../theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type Props = {
+  visible: boolean;
+  title: string;
+  onRequestClose: () => void;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  zIndexOffset?: number;
+  disabledKeyboardOffset?: boolean;
+  noPaddingBottom?: boolean;
+  estimatedHeight?: number;
+  getFullHeight?: (height: number) => void;
+};
+
+const ANIMATION_DURATION = 300;
+
+const ANIMATION_OPTIONS = {
+  duration: ANIMATION_DURATION,
+  easing: Easing.out(Easing.cubic),
+};
+const NO_OFFSET = 0;
+
+export const UIActionSheet = ({
+  visible,
+  title,
+  onRequestClose,
+  children,
+  zIndexOffset,
+  disabledKeyboardOffset,
+  noPaddingBottom = false,
+  estimatedHeight,
+  getFullHeight,
+  style,
+}: Props) => {
+  const [open, setOpen] = React.useState(visible);
+  const progress = useSharedValue(0);
+  const bodyHeight = useSharedValue(estimatedHeight ?? 0);
+  const headerHeight = useSharedValue(0);
+  const insets = useSafeAreaInsets();
+  const height = useDerivedValue(() => {
+    if (getFullHeight) {
+      runOnJS(getFullHeight)(bodyHeight.value + headerHeight.value);
+    }
+    return bodyHeight.value + headerHeight.value;
+  });
+  const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
+  const animatedStyle = useAnimatedStyle(() => {
+    const keyboardOffset = disabledKeyboardOffset
+      ? NO_OFFSET
+      : Math.abs(keyboardHeight.value);
+    return {
+      transform: [
+        {
+          translateY: -progress.value * height.value - keyboardOffset,
+        },
+      ],
+    };
+  });
+
+  const onGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      'worklet';
+      const newPosition = e.translationY * 0.9;
+      progress.value = interpolate(
+        newPosition,
+        [0, height.value],
+        [0, -1],
+        Extrapolation.CLAMP
+      );
+    })
+    .onEnd((e) => {
+      'worklet';
+      const keepOpen = e.translationY < height.value * 0.5;
+      if (keepOpen) {
+        progress.value = withTiming(0, ANIMATION_OPTIONS);
+      } else if (onRequestClose) {
+        runOnJS(onRequestClose)();
+      }
+    });
+
+  React.useEffect(() => {
+    if (visible) {
+      progress.value = withTiming(0, ANIMATION_OPTIONS);
+      setOpen(true);
+    } else {
+      progress.value = withTiming(-1, ANIMATION_OPTIONS, (finished) => {
+        if (finished) {
+          runOnJS(setOpen)(false);
+        }
+      });
+    }
+  }, [progress, visible]);
+
+  React.useEffect(() => {
+    if (!open) Keyboard.dismiss();
+  }, [open]);
+
+  React.useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (open) {
+          onRequestClose?.();
+          return true;
+        }
+        return;
+      }
+    );
+    return () => subscription.remove();
+  }, [open, onRequestClose]);
+
+  if (!open) return null;
+
+  return (
+    <Portal hostName="sheet">
+      <UIBackdrop
+        visible={visible}
+        onPress={onRequestClose}
+        animationDuration={ANIMATION_DURATION}
+        style={[{ zIndex: 10 + (zIndexOffset ? zIndexOffset + 5 : 0) }]}
+      />
+      <Animated.View
+        style={[
+          styles.container,
+          animatedStyle,
+          { bottom: 0, paddingBottom: Math.max(0, insets.bottom) },
+          { zIndex: 15 + (zIndexOffset ?? 0) },
+          style,
+        ]}
+      >
+        <UIStack
+          onLayout={(e) => {
+            headerHeight.value = e.nativeEvent.layout.height;
+          }}
+        >
+          <GestureDetector gesture={onGesture}>
+            <View style={styles.gestureBarContainer}>
+              <View style={styles.gestureBar} />
+            </View>
+          </GestureDetector>
+          <UIStack horizontal center style={styles.titleContainer}>
+            <UIText size={16} weight="600" style={styles.title}>
+              {title}
+            </UIText>
+            <UIButton
+              borderless
+              testID="action-sheet-close"
+              accessibilityLabel="action-sheet-close"
+              onPress={onRequestClose}
+              style={styles.close}
+            >
+              <UIIcon name="close" size={20} />
+            </UIButton>
+          </UIStack>
+        </UIStack>
+        <Animated.View
+          onLayout={(e) => {
+            bodyHeight.value = e.nativeEvent.layout.height;
+          }}
+          style={!noPaddingBottom && styles.body}
+        >
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 15,
+    backgroundColor: '#fff',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopLeftRadius: 17,
+    borderTopRightRadius: 17,
+  },
+  gestureBarContainer: {
+    paddingVertical: 5,
+  },
+  gestureBar: {
+    width: 45,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: theme.color.neutral.light['50'],
+    marginVertical: 16,
+    alignSelf: 'center',
+  },
+  title: {
+    marginVertical: 8,
+    marginHorizontal: 80,
+    flex: 1,
+    textAlign: 'center',
+  },
+  close: { position: 'absolute', right: 4, top: -10 },
+  titleContainer: {
+    width: '100%',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  body: {
+    paddingBottom: 32,
+  },
+  dev: {
+    marginVertical: 8,
+  },
+});