@lookiero/checkout 9.6.0 → 9.7.0-beta.0

package/dist/src/ExpoRoot.js

@@ -24,7 +24,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "9413fe3a-09fc-4264-905e-040bb7b4ca75",
+    customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
     country: Country.ES,
     segment: Segment.WOMEN,
 };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "@lookiero/i18n-react";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
+import { style } from "./TextareaCheckoutQuestionItem.style";
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
-    return (React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return (React.createElement(InputField, { label: placeholderText, style: { input: { container: style.inputContainer, input: style.input } }, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })) }));
 };
 export { TextareaCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts

@@ -0,0 +1,10 @@
+declare const style: {
+    input: {
+        paddingTop: number;
+    };
+    inputContainer: {
+        maxHeight: number;
+        minHeight: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space4 } = theme();
+const INPUT_MIN_HEIGHT = 96;
+const INPUT_MAX_HEIGHT = 242;
+const style = StyleSheet.create({
+    input: {
+        paddingTop: space4,
+    },
+    inputContainer: {
+        maxHeight: INPUT_MAX_HEIGHT,
+        minHeight: INPUT_MIN_HEIGHT,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
@@ -34,7 +33,7 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
     return (React.createElement(React.Fragment, null,
         React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, accessible: true, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(InputField, { editable: false, icon: "arrow_down", label: placeholderText, value: inputValue }))),
+                React.createElement(InputField, { icon: "arrow_down", label: placeholderText, value: inputValue, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { editable: false, placeholder: placeholderText, style: style, value: inputValue, onBlur: onBlur, onChange: () => void 0, onFocus: onFocus })) }))),
         React.createElement(Modal, { portalHostName: portalHostName, style: deepestReturnQuestionWithFeedback && { header: style.header }, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow_left", style: style.backButton, testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };

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

@@ -2,7 +2,7 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./TextareaReturnQuestionItem.style";
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
@@ -10,7 +10,7 @@ const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, test
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
-    return (React.createElement(View, { style: style.wrapper },
-        React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange })));
+    return (React.createElement(View, { style: style.wrapper, testID: "textarea-return-question-item" },
+        React.createElement(InputField, { label: placeholderText, style: { input: { container: style.inputContainer, input: style.input } }, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })) })));
 };
 export { TextareaReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts

@@ -1,4 +1,11 @@
 declare const style: {
+    input: {
+        paddingTop: number;
+    };
+    inputContainer: {
+        maxHeight: number;
+        minHeight: number;
+    };
     wrapper: {
         backgroundColor: string;
         padding: number;

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

@@ -1,7 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, space6 } = theme();
+const { colorBgBase, space4, space6 } = theme();
+const INPUT_MIN_HEIGHT = 96;
+const INPUT_MAX_HEIGHT = 242;
 const style = StyleSheet.create({
+    input: {
+        paddingTop: space4,
+    },
+    inputContainer: {
+        maxHeight: INPUT_MAX_HEIGHT,
+        minHeight: INPUT_MIN_HEIGHT,
+    },
     wrapper: {
         backgroundColor: colorBgBase,
         padding: space6,

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { Bullets, Carousel, LazyImage, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
+import { AspectRatioView, Bullets, Carousel, LazyImage, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
 import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { AspectRatioView } from "../../../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style } from "./ProductVariantSlider.style";
 const { space16 } = theme();

package/dist/src/shared/ui/components/atoms/field/Field.js

@@ -1,6 +1,6 @@
+import { animated, useSpring } from "@react-spring/native";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Text } from "@lookiero/aurora";
 import { theme } from "@lookiero/sty-psp-ui";
 import { style } from "./Field.style";
@@ -9,20 +9,17 @@ const { space1, space4 } = theme();
 const Field = ({ label, isFocused = false, style: customStyle }) => {
     const [width, setWidth] = useState(0);
     const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setWidth(layout.width), []);
-    const scale = useSharedValue(isFocused ? SCALE : 1);
-    scale.value = isFocused ? SCALE : 1;
-    const translateY = useSharedValue(isFocused ? -14 : space4);
-    translateY.value = isFocused ? -14 : space4;
-    const translateX = useSharedValue(isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0);
-    translateX.value = isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0;
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [
-            { scale: withTiming(scale.value) },
-            { translateY: withTiming(translateY.value) },
-            { translateX: withTiming(translateX.value) },
-        ],
-    }), [scale.value, translateX.value, translateY.value]);
-    return (React.createElement(Animated.View, { pointerEvents: "none", style: [customStyle?.field, animatedStyle], onLayout: handleOnLayout },
+    const springs = useSpring(isFocused
+        ? { scale: SCALE, translateY: -14, translateX: -(((1 - SCALE) * width) / 2 + space1) }
+        : { scale: 1, translateY: space4, translateX: 0 });
+    return (React.createElement(animated.View, { pointerEvents: "none", style: [
+            {
+                transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
+            },
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            customStyle?.field,
+        ], onLayout: handleOnLayout },
         React.createElement(Text, { level: 1, numberOfLines: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
         React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
 };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.6.0";
+export declare const VERSION = "9.7.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.6.0";
+export const VERSION = "9.7.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.6.0",
+  "version": "9.7.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -32,7 +32,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "9413fe3a-09fc-4264-905e-040bb7b4ca75",
+  customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
   country: Country.ES,
   segment: Segment.WOMEN,
 };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space4 } = theme();
+
+const INPUT_MIN_HEIGHT = 96;
+const INPUT_MAX_HEIGHT = 242;
+
+const style = StyleSheet.create({
+  input: {
+    paddingTop: space4,
+  },
+  inputContainer: {
+    maxHeight: INPUT_MAX_HEIGHT,
+    minHeight: INPUT_MIN_HEIGHT,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "@lookiero/i18n-react";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { style } from "./TextareaCheckoutQuestionItem.style";
 
 const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
@@ -17,18 +18,28 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
 
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
   const handleOnChange = useCallback(
-    (value: string) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }),
+    (value: string | undefined) =>
+      onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }),
     [onChange, checkoutQuestionParentId],
   );
 
   return (
     <InputField
       label={placeholderText}
-      placeholder={placeholderText}
-      testID={testID}
+      style={{ input: { container: style.inputContainer, input: style.input } }}
       value={feedback}
-      multiline
-      onChange={handleOnChange}
+      input={({ onBlur, onFocus, style }) => (
+        <TextInput
+          placeholder={placeholderText}
+          style={style}
+          testID={testID}
+          value={feedback}
+          multiline
+          onBlur={onBlur}
+          onChange={handleOnChange}
+          onFocus={onFocus}
+        />
+      )}
     />
   );
 };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -3,9 +3,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -71,7 +70,22 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
         onPress={handleOnPress}
       >
         <View pointerEvents="none">
-          <InputField editable={false} icon="arrow_down" label={placeholderText} value={inputValue} />
+          <InputField
+            icon="arrow_down"
+            label={placeholderText}
+            value={inputValue}
+            input={({ onBlur, onFocus, style }) => (
+              <TextInput
+                editable={false}
+                placeholder={placeholderText}
+                style={style}
+                value={inputValue}
+                onBlur={onBlur}
+                onChange={() => void 0}
+                onFocus={onFocus}
+              />
+            )}
+          />
         </View>
       </TouchableHighlight>
       <Modal

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.ts

@@ -1,9 +1,19 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space6 } = theme();
+const { colorBgBase, space4, space6 } = theme();
+
+const INPUT_MIN_HEIGHT = 96;
+const INPUT_MAX_HEIGHT = 242;
 
 const style = StyleSheet.create({
+  input: {
+    paddingTop: space4,
+  },
+  inputContainer: {
+    maxHeight: INPUT_MAX_HEIGHT,
+    minHeight: INPUT_MIN_HEIGHT,
+  },
   wrapper: {
     backgroundColor: colorBgBase,
     padding: space6,

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
+import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
@@ -22,19 +22,29 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
 
   const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
   const handleOnChange = useCallback(
-    (value: string) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }),
+    (value: string | undefined) =>
+      onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }),
     [onChange, returnQuestionParent.id],
   );
 
   return (
-    <View style={style.wrapper}>
+    <View style={style.wrapper} testID="textarea-return-question-item">
       <InputField
         label={placeholderText}
-        placeholder={placeholderText}
-        testID={testID}
+        style={{ input: { container: style.inputContainer, input: style.input } }}
         value={feedback}
-        multiline
-        onChange={handleOnChange}
+        input={({ onBlur, onFocus, style }) => (
+          <TextInput
+            placeholder={placeholderText}
+            style={style}
+            testID={testID}
+            value={feedback}
+            multiline
+            onBlur={onBlur}
+            onChange={handleOnChange}
+            onFocus={onFocus}
+          />
+        )}
       />
     </View>
   );

package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useCallback, useState } from "react";
 import {
+  AspectRatioView,
   Bullets,
   Carousel,
   LazyImage,
@@ -9,7 +10,6 @@ import {
   useScreenSize,
 } from "@lookiero/sty-psp-ui";
 import { MediaPerspective, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { AspectRatioView } from "../../../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style } from "./ProductVariantSlider.style";
 

package/src/shared/ui/components/atoms/aspectRatioView/AspectRatioView.tsx

@@ -1,46 +0,0 @@
-import React, { FC, ReactNode, useCallback, useState } from "react";
-import { LayoutChangeEvent, StyleProp, View, ViewStyle } from "react-native";
-
-interface Dimension {
-  readonly width?: number | undefined;
-  readonly height?: number | undefined;
-}
-
-enum AspectRatioViewResizeDirection {
-  VERTICAL = "VERTICAL",
-  HORIZONTAL = "HORIZONTAL",
-}
-
-interface AspectRatioViewProps {
-  readonly aspectRatio?: number;
-  readonly resizeDirection?: AspectRatioViewResizeDirection;
-  readonly multiplier?: number;
-  readonly children: ReactNode;
-  readonly style?: StyleProp<ViewStyle>;
-}
-const AspectRatioView: FC<AspectRatioViewProps> = ({
-  aspectRatio = 1,
-  resizeDirection = AspectRatioViewResizeDirection.HORIZONTAL,
-  multiplier = 1,
-  style: customStyle = {},
-  children,
-}) => {
-  const [{ width, height }, setDimension] = useState<Dimension>({});
-  const handleOnLayout = useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) =>
-      setDimension(
-        resizeDirection === AspectRatioViewResizeDirection.HORIZONTAL
-          ? { width: layout.width * multiplier, height: layout.width * aspectRatio }
-          : { width: layout.height * aspectRatio, height: layout.height },
-      ),
-    [aspectRatio, multiplier, resizeDirection],
-  );
-
-  return (
-    <View onLayout={handleOnLayout}>
-      <View style={[{ width, height }, customStyle]}>{children}</View>
-    </View>
-  );
-};
-
-export { AspectRatioView, AspectRatioViewResizeDirection };

package/src/shared/ui/components/atoms/field/Field.style.ts

@@ -1,22 +0,0 @@
-import { StyleSheet } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
-
-const { colorBgBase, space1 } = theme();
-
-const style = StyleSheet.create({
-  fieldBackground: {
-    backgroundColor: colorBgBase,
-    height: "100%",
-    position: "absolute",
-    width: "100%",
-    zIndex: 0,
-  },
-  fieldText: {
-    flexWrap: "nowrap",
-    overflow: "hidden",
-    paddingHorizontal: space1,
-    zIndex: 1,
-  },
-});
-
-export { style };

package/src/shared/ui/components/atoms/field/Field.test.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { render } from "../../../../../infrastructure/ui/test/render";
-import { Field } from "./Field";
-
-const label = "Field label";
-
-describe("Field atom", () => {
-  it("matches the snapshot for a non-focused", () => {
-    const { toJSON } = render(<Field label={label} />);
-
-    expect(toJSON()).toMatchSnapshot("non-focused");
-  });
-
-  it("matches the snapshot for focused", () => {
-    const { toJSON } = render(<Field label={label} isFocused />);
-
-    expect(toJSON()).toMatchSnapshot("focused");
-  });
-});

package/src/shared/ui/components/atoms/field/Field.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useCallback, useState } from "react";
-import { LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { Text } from "@lookiero/aurora";
-import { theme } from "@lookiero/sty-psp-ui";
-import { style } from "./Field.style";
-
-const SCALE = 0.75;
-
-const { space1, space4 } = theme();
-
-type FieldStyle = {
-  readonly field: StyleProp<ViewStyle>;
-  readonly fieldText: StyleProp<TextStyle>;
-};
-
-interface FieldProps {
-  readonly label: string;
-  readonly isFocused?: boolean;
-  readonly style?: FieldStyle;
-}
-const Field: FC<FieldProps> = ({ label, isFocused = false, style: customStyle }) => {
-  const [width, setWidth] = useState<number>(0);
-  const handleOnLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => setWidth(layout.width), []);
-
-  const scale = useSharedValue(isFocused ? SCALE : 1);
-  scale.value = isFocused ? SCALE : 1;
-  const translateY = useSharedValue(isFocused ? -14 : space4);
-  translateY.value = isFocused ? -14 : space4;
-  const translateX = useSharedValue(isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0);
-  translateX.value = isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0;
-  const animatedStyle = useAnimatedStyle(
-    () => ({
-      transform: [
-        { scale: withTiming(scale.value) },
-        { translateY: withTiming(translateY.value) },
-        { translateX: withTiming(translateX.value) },
-      ],
-    }),
-    [scale.value, translateX.value, translateY.value],
-  );
-
-  return (
-    <Animated.View pointerEvents="none" style={[customStyle?.field, animatedStyle]} onLayout={handleOnLayout}>
-      <Text level={1} numberOfLines={1} style={[style.fieldText, customStyle?.fieldText]} detail>
-        {label}
-      </Text>
-      <View style={[style.fieldBackground, { opacity: isFocused ? 1 : 0 }]} />
-    </Animated.View>
-  );
-};
-
-export type { FieldStyle };
-export { Field };

package/src/shared/ui/components/atoms/field/__snapshots__/Field.test.tsx.snap

@@ -1,225 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Field atom matches the snapshot for a non-focused: non-focused 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "flex": 1,
-      },
-    ]
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignSelf": "center",
-          "left": 0,
-          "marginHorizontal": "auto",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
-          "zIndex": 5,
-        },
-      ]
-    }
-  >
-    <RCTSafeAreaView />
-  </View>
-  <View
-    collapsable={false}
-    jestAnimatedStyle={
-      {
-        "value": {
-          "transform": [
-            {
-              "scale": 1,
-            },
-            {
-              "translateY": 16,
-            },
-            {
-              "translateX": 0,
-            },
-          ],
-        },
-      }
-    }
-    onLayout={[Function]}
-    pointerEvents="none"
-    style={
-      {
-        "transform": [
-          {
-            "scale": 1,
-          },
-          {
-            "translateY": 16,
-          },
-          {
-            "translateX": 0,
-          },
-        ],
-      }
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      numberOfLines={1}
-      selectable={false}
-      style={
-        [
-          {
-            "color": "#0C0A0A",
-            "flexWrap": "nowrap",
-            "fontFamily": "AreaNormal-Semibold",
-            "fontSize": 13,
-            "letterSpacing": 0.1,
-            "lineHeight": 17,
-            "overflow": "hidden",
-            "paddingBottom": 0,
-            "paddingHorizontal": 4,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 4,
-            "zIndex": 1,
-          },
-        ]
-      }
-    >
-      Field label
-    </Text>
-    <View
-      style={
-        [
-          {
-            "backgroundColor": "#FFFFFF",
-            "height": "100%",
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 0,
-          },
-          {
-            "opacity": 0,
-          },
-        ]
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`Field atom matches the snapshot for focused: focused 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "flex": 1,
-      },
-    ]
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignSelf": "center",
-          "left": 0,
-          "marginHorizontal": "auto",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
-          "zIndex": 5,
-        },
-      ]
-    }
-  >
-    <RCTSafeAreaView />
-  </View>
-  <View
-    collapsable={false}
-    jestAnimatedStyle={
-      {
-        "value": {
-          "transform": [
-            {
-              "scale": 0.75,
-            },
-            {
-              "translateY": -14,
-            },
-            {
-              "translateX": -4,
-            },
-          ],
-        },
-      }
-    }
-    onLayout={[Function]}
-    pointerEvents="none"
-    style={
-      {
-        "transform": [
-          {
-            "scale": 0.75,
-          },
-          {
-            "translateY": -14,
-          },
-          {
-            "translateX": -4,
-          },
-        ],
-      }
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      numberOfLines={1}
-      selectable={false}
-      style={
-        [
-          {
-            "color": "#0C0A0A",
-            "flexWrap": "nowrap",
-            "fontFamily": "AreaNormal-Semibold",
-            "fontSize": 13,
-            "letterSpacing": 0.1,
-            "lineHeight": 17,
-            "overflow": "hidden",
-            "paddingBottom": 0,
-            "paddingHorizontal": 4,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 4,
-            "zIndex": 1,
-          },
-        ]
-      }
-    >
-      Field label
-    </Text>
-    <View
-      style={
-        [
-          {
-            "backgroundColor": "#FFFFFF",
-            "height": "100%",
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 0,
-          },
-          {
-            "opacity": 1,
-          },
-        ]
-      }
-    />
-  </View>
-</View>
-`;

package/src/shared/ui/components/molecules/inputField/InputField.style.ts

@@ -1,40 +0,0 @@
-import { StyleSheet, Platform } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
-
-const { space1, space4, space6, borderRadius2, borderWidth1 } = theme();
-
-const style = StyleSheet.create({
-  error: {
-    marginLeft: space6,
-    marginTop: space1,
-  },
-  field: {
-    left: space4,
-    maxWidth: "100%",
-    position: "absolute",
-    zIndex: 4,
-  },
-  icon: {
-    height: 16,
-    position: "absolute",
-    right: space4,
-    top: space4,
-    width: 16,
-    zIndex: 4,
-  },
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  input: {
-    ...Platform.select({
-      web: {
-        textOverflow: "ellipsis",
-      },
-    }),
-  },
-  inputField: {
-    borderRadius: borderRadius2,
-    borderWidth: borderWidth1,
-  },
-});
-
-export { style };

package/src/shared/ui/components/molecules/inputField/InputField.test.tsx

@@ -1,41 +0,0 @@
-import { fireEvent } from "@testing-library/react-native";
-import React from "react";
-import { render } from "../../../../../infrastructure/ui/test/render";
-import { InputField } from "./InputField";
-
-const label = "InputField label";
-const value = "InputField value";
-const mockOnChange = jest.fn();
-
-describe("InputField molecule", () => {
-  it("matches the snapshot", () => {
-    const { toJSON } = render(<InputField label={label} value={value} onChange={mockOnChange} />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it("renders correctly", () => {
-    const { getByTestId } = render(<InputField label={label} value={value} onChange={mockOnChange} />);
-
-    const newValue = "New input value";
-    fireEvent.changeText(getByTestId("input-input"), newValue);
-
-    expect(mockOnChange).toHaveBeenCalledWith(newValue);
-  });
-
-  it("renders correctly if there is error", () => {
-    const error = "InputField error";
-
-    const { getByText } = render(<InputField error={error} label={label} value={value} onChange={mockOnChange} />);
-
-    expect(getByText(error)).toBeTruthy();
-  });
-
-  it.skip("renders correctly if there is an icon", () => {
-    const { getByTestId } = render(
-      <InputField icon="arrow_down" label={label} value={value} onChange={mockOnChange} />,
-    );
-
-    expect(getByTestId("icon")).toBeTruthy();
-  });
-});

package/src/shared/ui/components/molecules/inputField/InputField.tsx

@@ -1,97 +0,0 @@
-import React, { FC, useCallback, useState } from "react";
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native";
-import { COLOR, Icon, IconName, Input, InputProperties } from "@lookiero/aurora";
-import { Error, ErrorStyle, theme } from "@lookiero/sty-psp-ui";
-import { Field, FieldStyle } from "../../atoms/field/Field";
-import { style } from "./InputField.style";
-
-const {
-  colorBgBase,
-  colorBorderInput,
-  colorBorderInputError,
-  colorBorderInputFocus,
-  colorText,
-  colorTextError,
-  colorTextMedium,
-  iconSize,
-  space6,
-} = theme();
-
-const inputPaddingRightWithIcon = iconSize + space6;
-
-type IconStyle = StyleProp<TextStyle>;
-
-type InputFieldStyle = FieldStyle & {
-  readonly inputField: StyleProp<ViewStyle>;
-  readonly error: ErrorStyle;
-  readonly icon: IconStyle;
-};
-
-interface InputFieldBaseProps {
-  readonly label: string;
-  readonly multiline?: boolean;
-  readonly error?: string | null;
-  readonly style?: Partial<InputFieldStyle>;
-  readonly onChange?: (value: string) => void;
-  readonly icon?: IconName;
-}
-
-interface InputFieldProps extends Omit<InputProperties, keyof InputFieldBaseProps>, InputFieldBaseProps {}
-
-const InputField: FC<InputFieldProps> = ({
-  label,
-  placeholder,
-  value,
-  multiline = false,
-  error,
-  style: customStyle,
-  onChange = () => void 0,
-  icon,
-  testID = "input",
-  ...inputRestProps
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleOnChange = useCallback((text: string) => onChange(text), [onChange]);
-
-  const handleOnBlur = useCallback(() => setIsFocused(false), []);
-
-  const handleOnFocus = useCallback(() => setIsFocused(true), []);
-
-  const borderColor = error ? colorBorderInputError : isFocused ? colorBorderInputFocus : colorBorderInput;
-  const color = error ? colorTextError : isFocused ? colorText : colorTextMedium;
-
-  return (
-    <View style={[style.inputField, { borderColor }, customStyle?.inputField]} testID="input-field">
-      <Field
-        isFocused={isFocused || !!value}
-        label={label}
-        style={{
-          field: [style.field, customStyle?.field],
-          fieldText: [{ color }, customStyle?.fieldText],
-        }}
-      />
-      <Input
-        autoCapitalize="sentences"
-        multiline={multiline}
-        multilineMaxHeight={242}
-        placeholder={placeholder}
-        placeholderTextColor={isFocused ? colorTextMedium : colorBgBase}
-        style={[!!icon && { paddingRight: inputPaddingRightWithIcon }, style.input, { color }]}
-        testID={testID}
-        value={value}
-        onBlur={handleOnBlur}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        onChange={handleOnChange}
-        onFocus={handleOnFocus}
-        {...inputRestProps}
-      />
-      {!!icon && <Icon color={COLOR.GRAYSCALE_L} name={icon} style={[style.icon, customStyle?.icon]} testID="icon" />}
-      {!!error && <Error error={error} style={[style.error, customStyle?.error]} />}
-    </View>
-  );
-};
-
-export type { InputFieldStyle };
-export { InputField };

package/src/shared/ui/components/molecules/inputField/__snapshots__/InputField.test.tsx.snap

@@ -1,172 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InputField molecule matches the snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "flex": 1,
-      },
-    ]
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignSelf": "center",
-          "left": 0,
-          "marginHorizontal": "auto",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
-          "zIndex": 5,
-        },
-      ]
-    }
-  >
-    <RCTSafeAreaView />
-  </View>
-  <View
-    style={
-      [
-        {
-          "borderRadius": 4,
-          "borderWidth": 1,
-        },
-        {
-          "borderColor": "#DAD8D8",
-        },
-        undefined,
-      ]
-    }
-    testID="input-field"
-  >
-    <View
-      collapsable={false}
-      jestAnimatedStyle={
-        {
-          "value": {
-            "transform": [
-              {
-                "scale": 0.75,
-              },
-              {
-                "translateY": -14,
-              },
-              {
-                "translateX": -4,
-              },
-            ],
-          },
-        }
-      }
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "left": 16,
-          "maxWidth": "100%",
-          "position": "absolute",
-          "transform": [
-            {
-              "scale": 0.75,
-            },
-            {
-              "translateY": -14,
-            },
-            {
-              "translateX": -4,
-            },
-          ],
-          "zIndex": 4,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        numberOfLines={1}
-        selectable={false}
-        style={
-          [
-            {
-              "color": "#837C7C",
-              "flexWrap": "nowrap",
-              "fontFamily": "AreaNormal-Semibold",
-              "fontSize": 13,
-              "letterSpacing": 0.1,
-              "lineHeight": 17,
-              "overflow": "hidden",
-              "paddingBottom": 0,
-              "paddingHorizontal": 4,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 4,
-              "zIndex": 1,
-            },
-          ]
-        }
-      >
-        InputField label
-      </Text>
-      <View
-        style={
-          [
-            {
-              "backgroundColor": "#FFFFFF",
-              "height": "100%",
-              "position": "absolute",
-              "width": "100%",
-              "zIndex": 0,
-            },
-            {
-              "opacity": 1,
-            },
-          ]
-        }
-      />
-    </View>
-    <TextInput
-      allowFontScaling={false}
-      autoCapitalize="sentences"
-      autoCorrect={true}
-      editable={true}
-      keyboardType="default"
-      multiline={false}
-      onBlur={[Function]}
-      onChangeText={[Function]}
-      onContentSizeChange={[Function]}
-      onFocus={[Function]}
-      placeholderTextColor="#FFFFFF"
-      secureTextEntry={false}
-      style={
-        [
-          {
-            "fontFamily": "AreaNormal-Semibold",
-            "fontSize": 15,
-            "letterSpacing": -0.3,
-            "lineHeight": 20,
-            "paddingBottom": 16,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 11,
-          },
-          {
-            "color": "#0C0A0A",
-            "flex": 0,
-            "height": 56,
-          },
-          {},
-          {
-            "color": "#837C7C",
-          },
-        ]
-      }
-      testID="input-input"
-      value="InputField value"
-    />
-  </View>
-</View>
-`;