@lookiero/checkout 0.2.18 → 0.2.20

package/dist/infrastructure/ui/components/atoms/error/Error.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+declare type ErrorStyle = StyleProp<TextStyle>;
+interface ErrorProps {
+    readonly error?: string | null;
+    readonly style?: ErrorStyle;
+}
+declare const Error: FC<ErrorProps>;
+export type { ErrorStyle };
+export { Error };

package/dist/infrastructure/ui/components/atoms/error/Error.js

@@ -0,0 +1,5 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import React from "react";
+import { style } from "./Error.style";
+const Error = ({ error, style: customStyle }) => (React.createElement(Text, { detail: true, level: 2, style: [style.error, customStyle] }, error));
+export { Error };

package/dist/infrastructure/ui/components/atoms/error/Error.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    error: {
+        color: string;
+    };
+};
+export { style };

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

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

package/dist/infrastructure/ui/components/atoms/field/Field.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { TextStyle, ViewStyle } from "react-native";
+declare type FieldStyle = {
+    readonly field: ViewStyle;
+    readonly fieldText: TextStyle;
+};
+interface FieldProps {
+    readonly label: string;
+    readonly isFocused?: boolean;
+    readonly style?: FieldStyle;
+}
+declare const Field: FC<FieldProps>;
+export type { FieldStyle };
+export { Field };

package/dist/infrastructure/ui/components/atoms/field/Field.js

@@ -0,0 +1,28 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { animated, useSpring } from "@react-spring/native";
+import React from "react";
+import { theme } from "../../../theme/theme";
+import { style } from "./Field.style";
+const { spaceM } = theme();
+const Field = ({ label, isFocused = false, style: customStyle }) => {
+    const springs = useSpring(isFocused ? { scale: 0.75, translateY: -14, translateX: 0 } : { scale: 1, translateY: spaceM, translateX: spaceM });
+    return (React.createElement(animated.View, { pointerEvents: "none", style: [
+            style.field,
+            customStyle?.field,
+            {
+                transform: [
+                    {
+                        scale: springs.scale,
+                    },
+                    {
+                        translateY: springs.translateY,
+                    },
+                    {
+                        translateX: springs.translateX,
+                    },
+                ],
+            },
+        ] },
+        React.createElement(Text, { detail: true, level: 1, style: customStyle?.fieldText }, label)));
+};
+export { Field };

package/dist/infrastructure/ui/components/atoms/field/Field.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    field: {
+        paddingHorizontal: number;
+        backgroundColor: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/atoms/field/Field.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorBase, spaceS } = theme();
+const style = StyleSheet.create({
+    field: {
+        paddingHorizontal: spaceS,
+        backgroundColor: colorBase,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/atoms/input/Input.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { StyleProp, TextInputProps, TextStyle } from "react-native";
+declare type InputStyle = StyleProp<TextStyle>;
+interface InputProps extends TextInputProps {
+    readonly minHeight?: number;
+    readonly style?: InputStyle;
+}
+declare const Input: FC<InputProps>;
+export type { InputStyle };
+export { Input };

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

@@ -0,0 +1,29 @@
+import React, { useCallback, useState } from "react";
+import { Platform, TextInput, } from "react-native";
+import { theme } from "../../../theme/theme";
+import { style } from "./Input.style";
+const DEFAULT_HEIGHT = 56;
+const { colorGrayscaleL } = theme();
+const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, onChange, onContentSizeChange, ...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) => {
+        onContentSizeChange?.(event);
+        if (Platform.OS === "web")
+            return;
+        setHeight(Math.max(minHeight, event.nativeEvent.contentSize.height));
+    }, [minHeight, onContentSizeChange]);
+    // It's just update textarea height based on el.scrollHeight
+    const handleOnChange = useCallback((event) => {
+        onChange?.(event);
+        if (Platform.OS !== "web")
+            return;
+        window.requestAnimationFrame(() => {
+            const element = event.nativeEvent.target;
+            element.style.height = "0px";
+            element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
+        });
+    }, [minHeight, onChange]);
+    return (React.createElement(TextInput, { ...restOfProps, style: [style.input, customStyle, { height }], placeholderTextColor: colorGrayscaleL, textAlignVertical: "top", onContentSizeChange: handleOnContentSizeChange, onChange: handleOnChange, testID: "input" }));
+};
+export { Input };

package/dist/infrastructure/ui/components/atoms/input/Input.style.d.ts

@@ -0,0 +1,15 @@
+declare const style: {
+    input: {
+        paddingHorizontal: number;
+        paddingTop: number;
+        paddingBottom: number;
+        borderWidth: number;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+        outlineStyle: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/atoms/input/Input.style.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { borderSize, colorContent, fontBodySize3, fontBodyHeight3, fontBodyLetterSpacing3, fontMap, spaceM } = theme();
+const style = StyleSheet.create({
+    input: {
+        // paddingVertical not working in multiline mode
+        paddingHorizontal: spaceM,
+        paddingTop: spaceM,
+        paddingBottom: spaceM,
+        borderWidth: borderSize,
+        color: colorContent,
+        fontFamily: fontMap.Body,
+        fontSize: fontBodySize3,
+        lineHeight: fontBodyHeight3,
+        letterSpacing: fontBodyLetterSpacing3,
+        outlineStyle: "none",
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/molecules/inputField/InputField.d.ts

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ErrorStyle } from "../../atoms/error/Error";
+import { FieldStyle } from "../../atoms/field/Field";
+import { InputStyle } from "../../atoms/input/Input";
+declare type InputFieldStyle = FieldStyle & {
+    readonly inputField: StyleProp<ViewStyle>;
+    readonly input: InputStyle;
+    readonly error: ErrorStyle;
+};
+interface InputFieldProps {
+    readonly label: string;
+    readonly placeholder?: string;
+    readonly value: string | undefined;
+    readonly multiline?: boolean;
+    readonly minHeight?: number;
+    readonly error?: string | null;
+    readonly style?: Partial<InputFieldStyle>;
+    readonly onChange: (value: string) => void;
+}
+declare const InputField: FC<InputFieldProps>;
+export { InputField };

package/dist/infrastructure/ui/components/molecules/inputField/InputField.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
+import { theme } from "../../../theme/theme";
+import { Error } from "../../atoms/error/Error";
+import { Field } from "../../atoms/field/Field";
+import { Input } from "../../atoms/input/Input";
+import { style } from "./InputField.style";
+const { colorContent, colorGrayscaleL, colorPrimary } = theme();
+const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const handleOnChange = useCallback((text) => onChange(text), [onChange]);
+    const handleOnBlur = useCallback(() => setIsFocused(false), []);
+    const handleOnFocus = useCallback(() => setIsFocused(true), []);
+    const color = error ? colorPrimary : isFocused ? colorContent : colorGrayscaleL;
+    return (React.createElement(View, { style: customStyle?.inputField },
+        React.createElement(Field, { label: label, isFocused: isFocused || !!value, style: {
+                field: { ...style.field, ...customStyle?.field },
+                fieldText: {
+                    color,
+                    ...customStyle?.fieldText,
+                },
+            } }),
+        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [{ borderColor: color }, customStyle?.input] }),
+        !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
+};
+export { InputField };

package/dist/infrastructure/ui/components/molecules/inputField/InputField.style.d.ts

@@ -0,0 +1,11 @@
+declare const style: {
+    field: {
+        position: "absolute";
+        zIndex: number;
+    };
+    error: {
+        marginTop: number;
+        marginLeft: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/molecules/inputField/InputField.style.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { spaceXS, spaceL } = theme();
+const style = StyleSheet.create({
+    field: {
+        position: "absolute",
+        zIndex: 4,
+    },
+    error: {
+        marginTop: spaceXS,
+        marginLeft: spaceL,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.js

@@ -1,11 +1,8 @@
-import React, { memo, useCallback } from "react";
-import { useReturnQuestionFeedbackForId } from "./behaviors/useReturnQuestionFeedback";
+import React, { memo } from "react";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
 const ReturnQuestion = ({ returnQuestion, returnQuestionParentId }) => {
     const Item = useReturnQuestionItem({ type: returnQuestion.type });
-    const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
-    const handleOnChange = useCallback(({ feedback }) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: feedback }), [onChange, returnQuestionParentId]);
-    return (React.createElement(Item, { returnQuestion: returnQuestion, onChange: handleOnChange },
+    return (React.createElement(Item, { returnQuestion: returnQuestion, returnQuestionParentId: returnQuestionParentId },
         React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, returnQuestion: childReturnQuestion, returnQuestionParentId: returnQuestion.id }))))));
 };
 export default memo(ReturnQuestion);

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts

@@ -1,15 +1,9 @@
 import { FC } from "react";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
-interface OnChangeReturnQuestionItemFunctionArgs {
-    readonly feedback: string | undefined;
-}
-interface OnChangeReturnQuestionItemFunction {
-    (args: OnChangeReturnQuestionItemFunctionArgs): void;
-}
 interface ReturnQuestionItemProps {
     readonly returnQuestion: ReturnQuestionProjection;
-    readonly onChange: OnChangeReturnQuestionItemFunction;
+    readonly returnQuestionParentId: string;
     readonly children?: JSX.Element;
 }
 declare type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
-export type { ReturnQuestionItem, ReturnQuestionItemProps, OnChangeReturnQuestionItemFunction };
+export type { ReturnQuestionItem, ReturnQuestionItemProps };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -3,10 +3,12 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { TouchableHighlight } from "react-native";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
-const OptionReturnQuestionItem = ({ returnQuestion, onChange }) => {
+const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
+    const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const optionText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
-    const handleOnPress = useCallback(() => onChange({ feedback: returnQuestion.id }), [onChange, returnQuestion.id]);
+    const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParentId]);
     return (React.createElement(TouchableHighlight, { style: style.container, onPress: handleOnPress, underlayColor: containerUnderlayColor },
         React.createElement(Text, { level: 3 }, optionText)));
 };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,12 +1,12 @@
-import { InputField } from "@lookiero/aurora-next/build/components/atoms/InputField/InputField";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { InputField } from "../../../../molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
-const TextareaReturnQuestionItem = ({ returnQuestion, onChange }) => {
+const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
     const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
-    const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
-    const handleOnChange = useCallback((value) => onChange({ feedback: value }), [onChange]);
-    return (React.createElement(InputField, { name: returnQuestion.name, type: "text", multiLine: true, label: placeholderText, placeholder: placeholderText, value: feedback, onChange: handleOnChange }));
+    const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
+    const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
+    return (React.createElement(InputField, { multiline: true, label: placeholderText, placeholder: placeholderText, minHeight: 96, value: feedback, onChange: handleOnChange }));
 };
 export { TextareaReturnQuestionItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -27,6 +27,7 @@
     "@lookiero/i18n-react": "^0.8.0",
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
+    "@react-spring/native": "^9.5.5",
     "react-router-dom": "^6.4.1",
     "react-router-native": "^6.3.0",
     "tiny-invariant": "^1.2.0",