sapo-components-ui-rn 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# sapo-components-ui-rn
+
+Thư viện UI Components cho React Native được phát triển bởi Sapo.
+
+## Cài đặt
+
+```bash
+npm install sapo-components-ui-rn
+# or
+yarn add sapo-components-ui-rn
+```
+
+## Yêu cầu
+
+Thư viện này yêu cầu các peer dependencies sau:
+
+```json
+{
+  "react": ">=18.0.0",
+  "react-native": ">=0.70.0",
+  "@react-native-community/masked-view": "*",
+  "react-native-gesture-handler": "*",
+  "react-native-reanimated": "*",
+  "react-native-safe-area-context": "*",
+  "react-native-screens": "*"
+}
+```
+
+## Sử dụng
+
+```tsx
+import { Button, Text } from 'sapo-components-ui-rn';
+
+function MyComponent() {
+  return (
+    <Button onPress={() => console.log('Pressed')}>
+      <Text>Click me</Text>
+    </Button>
+  );
+}
+```
+
+## Components
+
+Thư viện bao gồm các components sau:
+
+- [Button](Button.md)
+- [ButtonIcon](ButtonIcon.md)
+- [Text](Text.md)
+- [TextInput](TextInput.md)
+- [Avatar](Avatar.md)
+- [Badge](Badge.md)
+- [Checkbox](Checkbox.md)
+- [ChipBar](ChipBar.md)
+- [RadioButton](RadioButton.md)
+- [Switch](Switch.md)
+- [CountingDot](CountingDot.md)
+- [FloatingButton](FloatingButton.md)
+- [Image](Image.md)
+- [Spacer](Spacer.md)
+- [View](View.md)
+<!-- 
+## Đóng góp
+
+Chúng tôi rất hoan nghênh mọi đóng góp! Vui lòng xem [hướng dẫn đóng góp](CONTRIBUTING.md) để biết thêm chi tiết. -->
+
+## Giấy phép
+
+Sapo.vn 

package/dist/assets/icon-checkbox-active.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="6" fill="#0088FF"/>
+<path d="M17.7745 8.32544L10.4245 15.6751L6.74951 12.0004" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icon-checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.75" y="2.75" width="18.5" height="18.5" rx="5.25" fill="white" stroke="#A1A5AB" stroke-width="1.5"/>
+</svg>

package/dist/assets/svg/icon-checkbox-active.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="6" fill="#0088FF"/>
+<path d="M17.7745 8.32544L10.4245 15.6751L6.74951 12.0004" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/svg/icon-checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.75" y="2.75" width="18.5" height="18.5" rx="5.25" fill="white" stroke="#A1A5AB" stroke-width="1.5"/>
+</svg>

package/dist/components/ActivityIndicator.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import type { ThemeProp } from "../types";
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+    /**
+     * Whether to show the indicator or hide it.
+     */
+    animating?: boolean;
+    /**
+     * The color of the spinner.
+     */
+    color?: string;
+    /**
+     * Size of the indicator.
+     */
+    size?: "small" | "large" | number;
+    /**
+     * Whether the indicator should hide when not animating.
+     */
+    hidesWhenStopped?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const ActivityIndicator: ({ animating, color: indicatorColor, hidesWhenStopped, size: indicatorSize, style, theme: themeOverrides, ...rest }: Props) => React.JSX.Element;
+export default ActivityIndicator;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle, ImageStyle } from "react-native";
+interface AvatarProps {
+    children?: React.ReactNode;
+    name?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    style?: StyleProp<ViewStyle>;
+    textColor?: string;
+    size: 64 | 48 | 24;
+    source?: string;
+    onPress?: () => void;
+    textStyle?: StyleProp<TextStyle>;
+    imageStyle?: StyleProp<ImageStyle>;
+}
+declare const Avatar: ({ children, name, backgroundColor, style, textColor, size, source, onPress, textStyle, imageStyle, }: AvatarProps) => React.JSX.Element;
+export default Avatar;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface BadgeProps {
+    children?: React.ReactNode;
+    value: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    style?: StyleProp<ViewStyle>;
+    textColor?: string;
+    textStyle?: StyleProp<TextStyle>;
+}
+declare const Badge: ({ children, value, borderColor, backgroundColor, style, textColor, textStyle, }: BadgeProps) => React.JSX.Element;
+export default Badge;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { StyleProp, ViewStyle, TouchableOpacityProps, TextStyle } from "react-native";
+import { ThemeProp } from "../../types";
+export interface ButtonProps extends TouchableOpacityProps {
+    style?: StyleProp<ViewStyle>;
+    borderColor?: string;
+    title?: string;
+    backgroundColor?: string;
+    isLoading?: boolean;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    small?: boolean;
+    textColor?: string;
+    bold?: boolean;
+    size?: number;
+    textStyle?: TextStyle;
+    medium?: boolean;
+    mode?: "outlined" | "contained" | "transparent";
+    onPress?: (res?: any) => void;
+    theme?: ThemeProp;
+}
+declare const _default: React.MemoExoticComponent<({ style, title, borderColor, isLoading, left, right, small, textStyle, onPress, disabled, backgroundColor, textColor, bold, size, medium, mode, theme: themeOverrides, ...props }: ButtonProps) => React.JSX.Element>;
+export default _default;

package/dist/components/ButtonIcon/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface ButtonIconProps {
+    isLoading?: boolean;
+    disabled?: boolean;
+    onPress?: (val?: any) => void;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    size?: number;
+    hiddenBackground?: boolean;
+    props?: object;
+    border?: boolean;
+    circle?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const _default: React.MemoExoticComponent<React.ComponentType<ButtonIconProps>>;
+export default _default;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface CheckboxProps {
+    style?: StyleProp<ViewStyle>;
+    content: string;
+    onPress?: (val?: any) => void;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    checked?: boolean;
+    iconSize?: number;
+}
+declare const Checkbox: ({ style, content, textStyle, onPress, disabled, leftIcon, checked, iconSize, }: CheckboxProps) => React.JSX.Element;
+export default Checkbox;

package/dist/components/ChipBar/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface ChipBarProps {
+    style?: StyleProp<ViewStyle>;
+    title: string;
+    borderRadius?: number;
+    onPress?: (val?: any) => void;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    badge?: number;
+    isActive?: boolean;
+}
+declare const ChipBar: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, badge, isActive, }: ChipBarProps) => React.JSX.Element;
+export default ChipBar;

package/dist/components/CountingDot/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface CountingDotProps {
+    children?: React.ReactNode;
+    value: string | number;
+    borderColor?: string;
+    backgroundColor?: string;
+    style?: StyleProp<ViewStyle>;
+    textColor?: string;
+    textStyle?: StyleProp<TextStyle>;
+}
+declare const CountingDot: ({ children, value, backgroundColor, style, textColor, textStyle, }: CountingDotProps) => React.JSX.Element;
+export default CountingDot;

package/dist/components/FloatingButton/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface FloatingButtonProps {
+    isLoading?: boolean;
+    disabled?: boolean;
+    onPress?: (val?: any) => void;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    size?: number;
+    hiddenBackground?: boolean;
+    props?: object;
+    backgroundColor?: string;
+    top?: number;
+    right?: number;
+}
+declare const _default: React.MemoExoticComponent<React.ComponentType<FloatingButtonProps>>;
+export default _default;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, TextStyle } from "react-native";
+export type IconType = "FontAwesome" | "Image" | "MaterialIcons" | "Feather" | "MaterialCommunityIcons" | "Svg";
+export interface IconProps {
+    name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText";
+    backgroundColor?: string;
+    size?: number;
+    color?: string;
+    style?: StyleProp<TextStyle>;
+    showBackground?: boolean;
+    onPress?: () => void;
+    type?: IconType;
+    tintColor?: string;
+    animatedProps?: Record<string, unknown>;
+}
+declare const _default: React.NamedExoticComponent<IconProps>;
+export default _default;

package/dist/components/IconSvg/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface SvgIconProps {
+    name: any;
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: any;
+    onPress?: () => void;
+    disabled?: boolean;
+}
+declare const SvgIcon: React.FC<SvgIconProps>;
+export default SvgIcon;

package/dist/components/Image/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ImageProps, StyleProp, ImageStyle } from "react-native";
+interface PropsCustomImage extends ImageProps {
+    useFastImage?: boolean;
+    disableDefaultImage?: boolean;
+    children?: React.ReactNode;
+    resizeMode?: "cover" | "contain" | "stretch" | "center";
+    source: any;
+    style?: StyleProp<ImageStyle>;
+    loadingColor?: string;
+    showLoading?: boolean;
+}
+declare const _default: React.MemoExoticComponent<React.ComponentType<PropsCustomImage>>;
+export default _default;

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Animated, StyleProp, View, ViewStyle } from "react-native";
+import type { ThemeProp } from "../types";
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+    /**
+     * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
+     * Note: It should not be used in parallel with the `progress` prop.
+     */
+    animatedValue?: number;
+    /**
+     * Progress value (between 0 and 1).
+     * Note: It should not be used in parallel with the `animatedValue` prop.
+     */
+    progress?: number;
+    /**
+     * Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop.
+     */
+    color?: string;
+    /**
+     * If the progress bar will show indeterminate progress.
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether to show the ProgressBar (true, the default) or hide it (false).
+     */
+    visible?: boolean;
+    /**
+     * Style of filled part of the ProgresBar.
+     */
+    fillStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+};
+declare const ProgressBar: ({ color, indeterminate, progress, visible, theme: themeOverrides, animatedValue, style, fillStyle, testID, ...rest }: Props) => React.JSX.Element;
+export default ProgressBar;

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface RadioButtonProps {
+    style?: StyleProp<ViewStyle>;
+    content: string;
+    onPress?: (val?: any) => void;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    checked?: boolean;
+}
+declare const RadioButton: ({ style, content, textStyle, onPress, disabled, leftIcon, checked, }: RadioButtonProps) => React.JSX.Element;
+export default RadioButton;

package/dist/components/ScaleButton/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TouchableOpacityProps } from "react-native";
+declare const _default: React.MemoExoticComponent<({ children, style, onPress, ...rest }: TouchableOpacityProps) => React.JSX.Element>;
+export default _default;

package/dist/components/SelectionField/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { StyleProp, ViewStyle, TouchableOpacityProps, TextStyle } from "react-native";
+import { IText } from "../Text";
+import { ThemeProp } from "../../types";
+export interface SelectionFieldProps extends TouchableOpacityProps {
+    style?: StyleProp<ViewStyle>;
+    borderColor?: string;
+    content?: string;
+    label?: string;
+    error?: string;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    textProps?: IText;
+    textColor?: string;
+    labelColor?: string;
+    size?: number;
+    textStyle?: TextStyle;
+    labelStyle?: TextStyle;
+    disabled?: boolean;
+    onPress?: (res?: any) => void;
+    theme?: ThemeProp;
+}
+declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, size, theme: themeOverrides, ...props }: SelectionFieldProps) => React.JSX.Element>;
+export default _default;

package/dist/components/Spacer/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface SpacerProps {
+    width?: number;
+    height?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Spacer: ({ style, width, height, }: SpacerProps) => React.JSX.Element;
+export default Spacer;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { StyleProp, Switch as NativeSwitch, ViewStyle } from "react-native";
+import type { ThemeProp } from "../../types";
+export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
+    /**
+     * Disable toggling the switch.
+     */
+    disabled?: boolean;
+    /**
+     * Value of the switch, true means 'on', false means 'off'.
+     */
+    value?: boolean;
+    /**
+     * Custom color for switch.
+     */
+    color?: string;
+    /**
+     * Callback called with the new value when it changes.
+     */
+    onValueChange?: Function;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Switch is a visual toggle between two mutually exclusive states — on and off.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Switch } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
+ *
+ *   const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
+ *
+ *   return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const Switch: ({ value, disabled, onValueChange, color, theme: themeOverrides, ...rest }: Props) => React.JSX.Element;
+export default Switch;

package/dist/components/Switch/utils.d.ts

@@ -0,0 +1,14 @@
+import type { InternalTheme } from "../../types";
+type BaseProps = {
+    theme: InternalTheme;
+    disabled?: boolean;
+    value?: boolean;
+};
+export declare const getSwitchColor: ({ theme, disabled, value, color, }: BaseProps & {
+    color?: string;
+}) => {
+    onTintColor: string;
+    thumbTintColor: string | undefined;
+    checkedColor: string;
+};
+export {};

package/dist/components/Text/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { TextProps } from "react-native";
+import { ThemeProp } from "../../types";
+export interface IText extends TextProps {
+    size?: number;
+    color?: string;
+    center?: boolean;
+    bold?: boolean;
+    medium?: boolean;
+    children?: any;
+    theme?: ThemeProp;
+}
+declare const _default: React.MemoExoticComponent<React.ComponentType<IText>>;
+export default _default;

package/dist/components/TextInput/Addons/Outline.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ColorValue, StyleProp, ViewStyle } from "react-native";
+import { TextInputLabelProp } from "../types";
+type OutlineProps = {
+    activeColor: string;
+    backgroundColor: ColorValue | any;
+    hasActiveOutline?: boolean;
+    focused?: boolean;
+    outlineColor?: string;
+    roundness?: number;
+    label?: TextInputLabelProp;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Outline: ({ label, activeColor, backgroundColor, hasActiveOutline, focused, outlineColor, roundness, style, }: OutlineProps) => React.JSX.Element;
+export {};

package/dist/components/TextInput/Addons/Underline.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ThemeProp } from "../../../types";
+type UnderlineProps = {
+    parentState: {
+        focused: boolean;
+    };
+    error?: boolean;
+    colors?: {
+        error?: string;
+    };
+    activeColor: string;
+    underlineColorCustom?: string;
+    hasActiveOutline?: boolean;
+    style?: StyleProp<ViewStyle>;
+    theme?: ThemeProp;
+};
+export declare const Underline: ({ parentState, error, colors, activeColor, underlineColorCustom, hasActiveOutline, style, }: UnderlineProps) => React.JSX.Element;
+export {};

package/dist/components/TextInput/Adornment/TextInputAdornment.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import type { LayoutChangeEvent, TextStyle, StyleProp, Animated, DimensionValue } from "react-native";
+import { AdornmentSide, AdornmentType } from "./enums";
+import type { AdornmentConfig, AdornmentStyleAdjustmentForNativeInput } from "./types";
+import { ThemeProp } from "../../../types";
+export declare function getAdornmentConfig({ left, right, }: {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}): Array<AdornmentConfig>;
+export declare function getAdornmentStyleAdjustmentForNativeInput({ adornmentConfig, leftAffixWidth, rightAffixWidth, paddingHorizontal, inputOffset, mode, }: {
+    inputOffset?: number;
+    adornmentConfig: AdornmentConfig[];
+    leftAffixWidth: number;
+    rightAffixWidth: number;
+    mode?: "outlined" | "flat";
+    paddingHorizontal?: DimensionValue;
+}): AdornmentStyleAdjustmentForNativeInput | {};
+export interface TextInputAdornmentProps {
+    forceFocus: () => void;
+    adornmentConfig: AdornmentConfig[];
+    topPosition: {
+        [AdornmentType.Affix]: {
+            [AdornmentSide.Left]: number | null;
+            [AdornmentSide.Right]: number | null;
+        };
+        [AdornmentType.Icon]: number;
+    };
+    onAffixChange: {
+        [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
+        [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
+    };
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    textStyle?: StyleProp<TextStyle>;
+    visible?: Animated.Value;
+    isTextInputFocused: boolean;
+    paddingHorizontal?: DimensionValue;
+    maxFontSizeMultiplier?: number | undefined | null;
+    theme?: ThemeProp;
+    disabled?: boolean;
+}
+declare const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps>;
+export default TextInputAdornment;