sapo-components-ui-rn 1.0.0

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import Toast from "./index";
+import { toastRef } from "../../utils/toast-manager";
+
+interface ToastRef {
+  show: (params: {
+    message: string;
+    duration?: number;
+    position?: "top" | "bottom";
+    type?: "success" | "fail";
+    onPress?: () => void;
+    title?: string;
+  }) => void;
+}
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+  /**
+   * Nếu ứng dụng đã có SafeAreaProvider, set wrapSafeArea = false
+   * @default true
+   */
+  wrapSafeArea?: boolean;
+}
+
+const ToastProvider = forwardRef<ToastRef, ToastProviderProps>(
+  ({ children, wrapSafeArea = true }, ref) => {
+    const toastComponentRef = React.useRef<ToastRef>(null);
+
+    // Expose the show method through the ref
+    useImperativeHandle(ref, () => ({
+      show: (params) => {
+        if (toastComponentRef.current) {
+          toastComponentRef.current.show(params);
+        }
+      },
+    }));
+
+    // Update the global toastRef when component mounts
+    React.useEffect(() => {
+      if (toastComponentRef.current) {
+        toastRef.current = toastComponentRef.current;
+      }
+      return () => {
+        toastRef.current = null;
+      };
+    }, []);
+
+    const renderToast = () => {
+      if (wrapSafeArea) {
+        return (
+          <SafeAreaProvider>
+            <Toast ref={toastComponentRef} />
+          </SafeAreaProvider>
+        );
+      }
+      return <Toast ref={toastComponentRef} />;
+    };
+
+    return (
+      <>
+        {children}
+        {renderToast()}
+      </>
+    );
+  }
+);
+
+export default ToastProvider;

package/src/components/Toast/index.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { CONSTANTS } from "../../styles/themes/tokens";
+import React, { useImperativeHandle, useRef, useState } from "react";
+import { StyleSheet, Image as RNImage } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Text from "../Text";
+import View from "../View";
+
+import { memoWithRef } from "@/utils/function-utils";
+import ViewVisibleAnimated from "../ViewVisibleAnimated";
+import { useInternalTheme } from "../../core/theming";
+
+const POSITION = {
+  TOP: "top",
+  BOTTOM: "bottom",
+} as const;
+
+type Position = (typeof POSITION)[keyof typeof POSITION];
+type ToastType = "success" | "error" | "info" | "warning";
+
+interface Notification {
+  message?: string;
+  duration?: number;
+  position?: Position;
+  type?: ToastType;
+  title: string;
+  onPress?: () => void;
+}
+
+interface ToastOptions {
+  position: Position;
+  type: ToastType;
+  title?: string;
+  onPress?: () => void;
+}
+
+interface ToastRef {
+  show: (options: Notification) => void;
+}
+
+interface ViewVisibleAnimatedRef {
+  show: (callback?: () => void, duration?: number) => void;
+  hide: (callback?: () => void, duration?: number) => void;
+}
+
+const Toast = memoWithRef(
+  (_props: Record<string, never>, ref: React.ForwardedRef<ToastRef>) => {
+    const [message, setMessage] = useState<string>("Thông báo");
+    const viewVisibleAnimatedRef = useRef<ViewVisibleAnimatedRef>(null);
+    const { bottom, top } = useSafeAreaInsets();
+    const [options, setOptions] = useState<ToastOptions>({
+      position: POSITION.TOP,
+      type: "success",
+      title: "Thông báo",
+    });
+
+    const theme = useInternalTheme();
+    const { colors } = theme;
+
+    const TIME_OUT = useRef<NodeJS.Timeout | null>(null);
+
+    const show = ({
+      message,
+      duration = 1000,
+      position = POSITION.TOP,
+      type = "success",
+      onPress,
+      title = "Thông báo",
+    }: Notification) => {
+      if (!TIME_OUT.current) {
+        handleShow({ message, position, type, onPress, title, duration });
+        return;
+      }
+
+      clearTimeout(TIME_OUT.current);
+      hide(() => {
+        handleShow({
+          message,
+          position,
+          type,
+          onPress,
+          title,
+          duration,
+        });
+      }, true);
+    };
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show,
+      }),
+      []
+    );
+
+    const handleShow = ({
+      message,
+      position = POSITION.TOP,
+      type = "success",
+      onPress,
+      title = "Thông báo",
+      duration = 1000,
+    }: Notification) => {
+      setMessage(message || "");
+      setOptions({ position, type, onPress, title });
+
+      viewVisibleAnimatedRef.current?.show?.(() => {
+        TIME_OUT.current = setTimeout(() => {
+          hide(() => {}, false);
+        }, duration);
+      }, 100);
+    };
+
+    const hide = (callback: () => void, skipSetMessage: boolean) => {
+      viewVisibleAnimatedRef.current?.hide?.(() => {
+        if (!skipSetMessage) {
+          setMessage("Thông báo");
+        }
+        callback?.();
+      }, 300);
+    };
+
+    const onPressToast = () => {
+      hide(() => {}, false);
+      options?.onPress?.();
+    };
+
+    const getBackgroundColor = () => {
+      switch (options.type) {
+        case "success":
+          return colors.surfaceSuccessDefault;
+        case "error":
+          return colors.surfaceErrorDefault;
+        case "info":
+          return colors.surfacePrimaryInverseDefault;
+        case "warning":
+          return colors.surfaceWarningDefault;
+        default:
+          return colors.surfaceSuccessDefault;
+      }
+    };
+
+    const getSourceIcon = () => {
+      switch (options.type) {
+        case "success":
+          return require("./assets/images/success.png");
+        case "error":
+          return require("./assets/images/error.png");
+        case "info":
+          return require("./assets/images/info.png");
+        case "warning":
+          return require("./assets/images/warning.png");
+        default:
+          return require("./assets/images/success.png");
+      }
+    };
+
+    return (
+      <ViewVisibleAnimated
+        ref={viewVisibleAnimatedRef}
+        autoShow={false}
+        scaleEnable
+        style={[
+          styles.container,
+          options.position === POSITION.BOTTOM && {
+            bottom: bottom ? bottom : CONSTANTS.SPACE_16,
+          },
+          options.position === POSITION.TOP && {
+            top: top ? top : CONSTANTS.SPACE_16,
+          },
+        ]}
+      >
+        <View
+          row={!options.title}
+          center={!options.title}
+          full
+          onPress={onPressToast}
+          style={[
+            styles.wrapContent,
+            {
+              shadowColor: "black",
+              shadowOffset: {
+                width: 1,
+                height: 2,
+              },
+              shadowOpacity: 0.3,
+              shadowRadius: 5,
+              backgroundColor: getBackgroundColor(),
+            },
+          ]}
+        >
+          <View row style={{ alignItems: "flex-start" }}>
+            <View>
+              <RNImage source={getSourceIcon()} style={styles.img} />
+            </View>
+            <View full paddingLeft={CONSTANTS.SPACE_8}>
+              <Text bold color={colors.textOnFillDefault}>
+                {options.title}
+              </Text>
+              {message.toString().length > 0 && (
+                <Text
+                  color={colors.textOnFillDefault}
+                  numberOfLines={4}
+                  style={!options.title && styles.wrapMess}
+                >
+                  {message}
+                </Text>
+              )}
+            </View>
+          </View>
+        </View>
+      </ViewVisibleAnimated>
+    );
+  }
+);
+
+export default Toast;
+
+const styles = StyleSheet.create({
+  wrapMess: { marginLeft: CONSTANTS.SPACE_8, flex: 1 },
+  wrapContent: {
+    borderRadius: CONSTANTS.BORDER_RADIUS_12,
+    padding: CONSTANTS.SPACE_12,
+    width: CONSTANTS.DEVICE_WIDTH - CONSTANTS.SPACE_16 * 2,
+    marginHorizontal: CONSTANTS.SPACE_16,
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    width: CONSTANTS.DEVICE_WIDTH,
+  },
+  img: {
+    width: 20,
+    height: 20,
+  },
+});

package/src/components/Typography/AnimatedText.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import {
+  Animated,
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  Text,
+} from "react-native";
+
+import type { VariantProp } from "./types";
+import { useInternalTheme } from "../../core/theming";
+import type { ThemeProp } from "../../types";
+import { forwardRef } from "../../utils/forwardRef";
+
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+  /**
+   * Variant defines appropriate text styles for type role and its size.
+   * Available variants:
+   *
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+   *
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+   *
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+   *
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+   *
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   */
+  variant?: VariantProp<T>;
+  style?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
+  function AnimatedText({ style, variant, ...rest }, ref) {
+    const theme = useInternalTheme();
+    const writingDirection = I18nManager.getConstants().isRTL ? "rtl" : "ltr";
+
+    if (variant) {
+      const font = theme.fonts[variant];
+      if (typeof font !== "object") {
+        throw new Error(
+          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+            theme.fonts
+          ).join(", ")}.`
+        );
+      }
+
+      return (
+        <Animated.Text
+          ref={ref}
+          {...rest}
+          style={[
+            font,
+            styles.text,
+            { writingDirection, color: theme.colors.backgroundPrimary },
+            style,
+          ]}
+        />
+      );
+    }
+  }
+);
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: "left",
+  },
+});
+
+export const customAnimatedText = <T,>() =>
+  AnimatedText as (props: Props<T>) => JSX.Element;
+
+export default AnimatedText;

package/src/components/Typography/StyledText.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { I18nManager, StyleProp, StyleSheet, TextStyle } from "react-native";
+
+import color from "color";
+
+import Text from "./Text";
+import type { ThemeProp } from "../../types";
+import { useInternalTheme } from "../../core/theming";
+
+type Props = React.ComponentProps<typeof Text> & {
+  alpha?: number;
+  family: "regular" | "medium" | "light" | "thin";
+  style?: StyleProp<TextStyle>;
+  theme?: ThemeProp;
+};
+
+const StyledText = ({
+  alpha = 1,
+  family,
+  style,
+  theme: themeOverrides,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme();
+
+  const textColor = color(theme.colors.backgroundPrimary)
+    .alpha(alpha)
+    .rgb()
+    .string();
+  const writingDirection = I18nManager.getConstants().isRTL ? "rtl" : "ltr";
+
+  return (
+    <Text
+      {...rest}
+      style={[
+        styles.text,
+        {
+          color: textColor,
+          writingDirection,
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: "left",
+  },
+});
+
+export default StyledText;

package/src/components/Typography/Text.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import {
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+  Text as NativeText,
+  TextStyle,
+} from "react-native";
+
+import AnimatedText from "./AnimatedText";
+import type { VariantProp } from "./types";
+import StyledText from "./StyledText";
+import { useInternalTheme } from "../../core/theming";
+import type { ThemeProp } from "../../types";
+import { forwardRef } from "../../utils/forwardRef";
+
+export type Props<T> = React.ComponentProps<typeof NativeText> & {
+  /**
+   * @supported Available in v5.x with theme version 3
+   *
+   * Variant defines appropriate text styles for type role and its size.
+   * Available variants:
+   *
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+   *
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+   *
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+   *
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+   *
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   */
+  variant?: VariantProp<T>;
+  children: React.ReactNode;
+  theme?: ThemeProp;
+  style?: StyleProp<TextStyle>;
+};
+
+export type TextRef = React.ForwardedRef<{
+  setNativeProps(args: Object): void;
+}>;
+
+// @component-group Typography
+
+/**
+ * Typography component showing styles complied with passed `variant` prop and supported by the type system.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <>
+ *     <Text variant="displayLarge">Display Large</Text>
+ *     <Text variant="displayMedium">Display Medium</Text>
+ *     <Text variant="displaySmall">Display small</Text>
+ *
+ *     <Text variant="headlineLarge">Headline Large</Text>
+ *     <Text variant="headlineMedium">Headline Medium</Text>
+ *     <Text variant="headlineSmall">Headline Small</Text>
+ *
+ *     <Text variant="titleLarge">Title Large</Text>
+ *     <Text variant="titleMedium">Title Medium</Text>
+ *     <Text variant="titleSmall">Title Small</Text>
+ *
+ *     <Text variant="bodyLarge">Body Large</Text>
+ *     <Text variant="bodyMedium">Body Medium</Text>
+ *     <Text variant="bodySmall">Body Small</Text>
+ *
+ *     <Text variant="labelLarge">Label Large</Text>
+ *     <Text variant="labelMedium">Label Medium</Text>
+ *     <Text variant="labelSmall">Label Small</Text>
+ *  </>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const Text = (
+  { style, variant, theme: initialTheme, ...rest }: Props<string>,
+  ref: TextRef
+) => {
+  const root = React.useRef<NativeText | null>(null);
+  // FIXME: destructure it in TS 4.6+
+  const theme = useInternalTheme();
+  const writingDirection = I18nManager.getConstants().isRTL ? "rtl" : "ltr";
+
+  React.useImperativeHandle(ref, () => ({
+    setNativeProps: (args: Object) => root.current?.setNativeProps(args),
+  }));
+
+  if (variant) {
+    let font = theme.fonts[variant];
+    let textStyle = [font, style];
+
+    if (
+      React.isValidElement(rest.children) &&
+      (rest.children.type === Component ||
+        rest.children.type === AnimatedText ||
+        rest.children.type === StyledText)
+    ) {
+      const { props } = rest.children;
+
+      // Context:   Some components have the built-in `Text` component with a predefined variant,
+      //            that also accepts `children` as a `React.Node`. This can result in a situation,
+      //            where another `Text` component is rendered within the built-in `Text` component.
+      //            By doing that, we assume that user doesn't want to consume pre-defined font properties.
+      // Case one:  Nested `Text` has different `variant` that specified in parent. For example:
+      //              <Chip>
+      //                <Text variant="displayMedium">Nested</Text>
+      //              </Chip>
+      // Solution:  To address the following scenario, the code below overrides the `variant`
+      //            specified in a parent in favor of children's variant:
+      //@ts-ignore
+      if (props.variant) {
+        //@ts-ignore
+        font = theme.fonts[props.variant as VariantProp<typeof props.variant>];
+        textStyle = [style, font];
+      }
+
+      // Case two:  Nested `Text` has specified `styles` which intefere
+      //            with font properties, from the parent's `variant`. For example:
+      //              <Chip>
+      //                <Text style={{fontSize: 30}}>Nested</Text>
+      //              </Chip>
+      // Solution:  To address the following scenario, the code below overrides the
+      //            parent's style with children's style:
+      //@ts-ignore
+      if (!props.variant) {
+        //@ts-ignore
+        textStyle = [style, props.style];
+      }
+    }
+
+    if (typeof font !== "object") {
+      throw new Error(
+        `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+          theme.fonts
+        ).join(", ")}.`
+      );
+    }
+
+    return (
+      <NativeText
+        ref={root}
+        style={[
+          styles.text,
+          { writingDirection, color: theme.colors.backgroundPrimary },
+          textStyle,
+        ]}
+        {...rest}
+      />
+    );
+  } else {
+    const font = theme.fonts.default;
+    const textStyle = {
+      ...font,
+      color: theme.colors?.backgroundPrimary,
+    };
+    return (
+      <NativeText
+        {...rest}
+        ref={root}
+        style={[styles.text, textStyle, { writingDirection }, style]}
+      />
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: "left",
+  },
+});
+
+type TextComponent<T> = (
+  props: Props<T> & { ref?: React.RefObject<TextRef> }
+  //@ts-ignore
+) => JSX.Element;
+
+const Component = forwardRef(Text) as TextComponent<never>;
+
+export const customText = <T,>() => Component as unknown as TextComponent<T>;
+
+export default Component;

package/src/components/Typography/types.tsx

@@ -0,0 +1,5 @@
+import type { MD3TypescaleKey } from '../../types';
+
+export type VariantProp<T> =
+  | (T extends string ? (string extends T ? never : T) : never)
+  | keyof typeof MD3TypescaleKey;