@lookiero/checkout 3.7.0 → 3.8.0-beta.0

package/dist/shared/ui/components/atoms/error/Error.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorPrimary } = theme();
+const style = StyleSheet.create({
+    error: {
+        color: colorPrimary,
+    },
+});
+export { style };

package/dist/shared/ui/components/atoms/input/Input.js

@@ -6,7 +6,7 @@ const MIN_HEIGHT = 56;
 const MAX_HEIGHT = 242; // 10 lines
 const { colorGrayscaleL } = theme();
 const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
-const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, ...restOfProps }) => {
+const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
@@ -32,6 +32,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
     }, [maxHeight, minHeight, multiline]);
     useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
     const textInputRef = useRef(null);
-    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
+    return (React.createElement(TextInput, { ref: textInputRef, accessibilityLabel: testID, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: testID, textAlignVertical: "top", value: value, accessible: true, onChange: onChange, onContentSizeChange: handleOnContentSizeChange, ...restOfProps }));
 };
 export { Input };

package/dist/shared/ui/components/layouts/modal/Modal.js

@@ -75,7 +75,7 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
                     (header || showCloseButton) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
                         showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
-                    React.createElement(ModalContentView, null,
+                    React.createElement(ModalContentView, { keyboardShouldPersistTaps: "handled" },
                         React.createElement(View, { style: {
                                 paddingBottom: safeAreaInsetBottom +
                                     (Platform.OS !== "ios" ? spaceXL : 0) +

package/dist/shared/ui/components/layouts/slider/Pagination.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface PaginationProps {
+    readonly touchable?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly count?: number;
+    readonly activeIndex?: number;
+    readonly onChange: (index: number) => void;
+    readonly renderItem?: (index: number) => ReactNode;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { style } from "./Pagination.style";
+const Pagination = ({ touchable = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, count = 0, activeIndex = 0, renderItem, onChange, }) => (React.createElement(View, { style: [style.paginationWrapper, paginationStyle], testID: "slider-pagination" }, Array.from(Array(count).keys()).map((index) => (React.createElement(View, { key: index, style: style.paginationContainer },
+    React.createElement(Pressable, { testID: "slider-pagination-item", style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], onPress: !touchable ? undefined : () => onChange(index) }, renderItem?.(index)))))));
+export { Pagination };

package/dist/shared/ui/components/layouts/slider/Pagination.style.d.ts

@@ -0,0 +1,23 @@
+declare const style: {
+    active: {
+        backgroundColor: string;
+    };
+    paginationContainer: {
+        margin: number;
+    };
+    paginationItem: {
+        backgroundColor: string;
+        borderRadius: number;
+        height: number;
+        width: number;
+    };
+    paginationWrapper: {
+        alignItems: "center";
+        bottom: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        position: "absolute";
+        width: string;
+    };
+};
+export { style };

package/dist/shared/ui/components/layouts/slider/Pagination.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorGrayscaleS, colorGrayscaleXL } = theme();
+const DOT_SIZE = 8;
+const style = StyleSheet.create({
+    active: {
+        backgroundColor: colorGrayscaleXL,
+    },
+    paginationContainer: {
+        margin: 3,
+    },
+    paginationItem: {
+        backgroundColor: colorGrayscaleS,
+        borderRadius: DOT_SIZE / 2,
+        height: DOT_SIZE,
+        width: DOT_SIZE,
+    },
+    paginationWrapper: {
+        alignItems: "center",
+        bottom: 10,
+        flexDirection: "row",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
+    },
+});
+export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.js

@@ -6,7 +6,7 @@ import { Modal } from "../../layouts/modal/Modal";
 import { InputField } from "../inputField/InputField";
 import { style } from "./SelectField.style";
 const { colorGrayscaleS } = theme();
-const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
+const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, testID, ...touchableRestProps }) => {
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -16,13 +16,13 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
     }, [handleOnModalClose, onChange]);
     const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TouchableHighlight, { style: customStyle?.selectField, underlayColor: colorGrayscaleS, onPress: handleOnPressSelectField, ...touchableRestProps },
+        React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: customStyle?.selectField, testID: testID, underlayColor: colorGrayscaleS, accessible: true, onPress: handleOnPressSelectField, ...touchableRestProps },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
         React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
                 title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
-                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorGrayscaleS, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
                     React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
 };
 export { SelectField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "3.7.0",
+  "version": "3.8.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [