@lookiero/checkout 0.3.26 → 0.4.0-beta.0

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../theme/theme";
+const { spaceXL } = theme();
+const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"] }) => {
+    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    return (React.createElement(SafeAreaView, { edges: edges },
+        React.createElement(ScrollView, { contentContainerStyle: {
+                paddingTop: !safeAreaInsetTop ? spaceXL : 0,
+                paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+            } }, children)));
+};
+export { SafeAreaScrollView };

package/dist/infrastructure/ui/hooks/useMediaImage.d.ts

@@ -0,0 +1,7 @@
+interface CdnImageUrlParameters {
+    url: string;
+    width: number;
+    dpi?: number;
+}
+declare const useMediaImage: () => ({ url, width, dpi }: CdnImageUrlParameters) => string;
+export { useMediaImage };

package/dist/infrastructure/ui/hooks/useMediaImage.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { PixelRatio } from "react-native";
+const DEFAULT_DPI = 1;
+const HIGHDPI = 2;
+const useMediaImage = () => {
+    const cdnImageUrl = useCallback(({ url, width, dpi = PixelRatio.get() }) => {
+        const imageDpi = dpi > DEFAULT_DPI ? HIGHDPI : DEFAULT_DPI;
+        return `${url}?w=${Math.ceil(width * imageDpi)}&f=auto`;
+    }, []);
+    return cdnImageUrl;
+};
+export { useMediaImage };

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -0,0 +1,39 @@
+declare const COLOR_I18N_PREFIX = "color.";
+declare const RETURN_QUESTIONS_PREFIX = "return_questions.";
+declare const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
+declare enum I18nMessages {
+    INTRO_TITLE = "intro.title",
+    INTRO_SUBTITLE = "intro.subtitle",
+    INTRO_DISCOUNT = "intro.discount",
+    INTRO_BULLET_ONE = "intro.bullet_one",
+    INTRO_BULLET_TWO = "intro.bullet_two",
+    INTRO_BULLET_THREE = "intro.bullet_three",
+    INTRO_BUTTON = "intro.button",
+    ITEM_SIZE = "item.size",
+    ITEM_COLOR = "item.color",
+    ITEM_UNIQUE = "item.unique",
+    ITEM_SIZES_LABEL = "item.sizes_label",
+    ITEM_KEEP_BUTTON = "item.keep_button",
+    ITEM_RETURN_BUTTON = "item.return_button",
+    ITEM_BANNER_CUSTOMER_KEPT_DECISSION = "item.banner_customer_kept_decission",
+    ITEM_BANNER_CUSTOMER_REPLACED_DECISSION = "item.banner_customer_replaced_decission",
+    ITEM_BANNER_CUSTOMER_RETURNED_DECISSION = "item.banner_customer_returned_decission",
+    ITEM_BANNER_BUTTON = "item.banner_button",
+    SIZE_CHANGE_MODAL_TITLE = "size_change_modal.title",
+    SIZE_CHANGE_MODAL_DESCRIPTION = "size_change_modal.description",
+    SIZE_CHANGE_MODAL_BUTTON = "size_change_modal.button",
+    SIZE_WITHOUT_STOCK_MODAL_TITLE = "size_without_stock_modal.title",
+    SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION = "size_without_stock_modal.description",
+    SIZE_WITHOUT_STOCK_MODAL_BUTTON = "size_without_stock_modal.button",
+    GET_OUT_OF_CHECKOUT_MODAL_TITLE = "get_out_of_checkout_modal.title",
+    GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION = "get_out_of_checkout_modal.description",
+    GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
+    GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button",
+    FEEDBACK_TITLE = "feedback.title",
+    FEEDBACK_UNANSWERED = "feedback.unanswered",
+    RETURN_QUESTIONS_TITLE = "return_questions.title",
+    RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
+    SUMMARY_KEEP_TAB = "summary.keep_tab",
+    SUMMARY_RETURN_TAB = "summary.return_tab"
+}
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/infrastructure/ui/i18n/i18n.js

@@ -0,0 +1,40 @@
+const COLOR_I18N_PREFIX = "color.";
+const RETURN_QUESTIONS_PREFIX = "return_questions.";
+const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
+var I18nMessages;
+(function (I18nMessages) {
+    I18nMessages["INTRO_TITLE"] = "intro.title";
+    I18nMessages["INTRO_SUBTITLE"] = "intro.subtitle";
+    I18nMessages["INTRO_DISCOUNT"] = "intro.discount";
+    I18nMessages["INTRO_BULLET_ONE"] = "intro.bullet_one";
+    I18nMessages["INTRO_BULLET_TWO"] = "intro.bullet_two";
+    I18nMessages["INTRO_BULLET_THREE"] = "intro.bullet_three";
+    I18nMessages["INTRO_BUTTON"] = "intro.button";
+    I18nMessages["ITEM_SIZE"] = "item.size";
+    I18nMessages["ITEM_COLOR"] = "item.color";
+    I18nMessages["ITEM_UNIQUE"] = "item.unique";
+    I18nMessages["ITEM_SIZES_LABEL"] = "item.sizes_label";
+    I18nMessages["ITEM_KEEP_BUTTON"] = "item.keep_button";
+    I18nMessages["ITEM_RETURN_BUTTON"] = "item.return_button";
+    I18nMessages["ITEM_BANNER_CUSTOMER_KEPT_DECISSION"] = "item.banner_customer_kept_decission";
+    I18nMessages["ITEM_BANNER_CUSTOMER_REPLACED_DECISSION"] = "item.banner_customer_replaced_decission";
+    I18nMessages["ITEM_BANNER_CUSTOMER_RETURNED_DECISSION"] = "item.banner_customer_returned_decission";
+    I18nMessages["ITEM_BANNER_BUTTON"] = "item.banner_button";
+    I18nMessages["SIZE_CHANGE_MODAL_TITLE"] = "size_change_modal.title";
+    I18nMessages["SIZE_CHANGE_MODAL_DESCRIPTION"] = "size_change_modal.description";
+    I18nMessages["SIZE_CHANGE_MODAL_BUTTON"] = "size_change_modal.button";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_TITLE"] = "size_without_stock_modal.title";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION"] = "size_without_stock_modal.description";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_BUTTON"] = "size_without_stock_modal.button";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_TITLE"] = "get_out_of_checkout_modal.title";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION"] = "get_out_of_checkout_modal.description";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON"] = "get_out_of_checkout_modal.dismiss_button";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON"] = "get_out_of_checkout_modal.confirm_button";
+    I18nMessages["FEEDBACK_TITLE"] = "feedback.title";
+    I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
+    I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
+    I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
+    I18nMessages["SUMMARY_KEEP_TAB"] = "summary.keep_tab";
+    I18nMessages["SUMMARY_RETURN_TAB"] = "summary.return_tab";
+})(I18nMessages || (I18nMessages = {}));
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+interface CheckoutAccessibilityMiddlewareProps {
+    readonly customerId: string | undefined;
+    readonly onNotAccessible: () => void;
+    readonly loader?: JSX.Element;
+    readonly children: JSX.Element;
+}
+declare const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps>;
+export { CheckoutAccessibilityMiddleware };

package/dist/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -0,0 +1,21 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useEffect, useRef } from "react";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
+import { Spinner } from "../shared/components/atoms/spinner/Spinner";
+const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
+    const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
+    const onNotAccessibleRef = useRef(onNotAccessible);
+    onNotAccessibleRef.current = onNotAccessible;
+    const notAccessible = accessible === false || status === QueryStatus.ERROR;
+    useEffect(() => {
+        if (notAccessible) {
+            onNotAccessibleRef.current();
+        }
+    }, [notAccessible, onNotAccessible]);
+    return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
+        ? loader
+        : accessible
+            ? children
+            : null;
+};
+export { CheckoutAccessibilityMiddleware };

package/dist/infrastructure/ui/routing/CheckoutMiddleware.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+interface CheckoutMiddlewareProps {
+    readonly basePath: string;
+    readonly customerId: string;
+    readonly loader?: JSX.Element;
+    readonly children: JSX.Element;
+}
+declare const CheckoutMiddleware: FC<CheckoutMiddlewareProps>;
+export { CheckoutMiddleware };

package/dist/infrastructure/ui/routing/CheckoutMiddleware.js

@@ -0,0 +1,47 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useRef } from "react";
+import { generatePath, Navigate, useMatch } from "react-router-native";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
+import { Spinner } from "../shared/components/atoms/spinner/Spinner";
+import { Routes } from "./routes";
+const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement(Spinner, null), children }) => {
+    const introShown = useRef(false);
+    const [shouldIntroBeShown, shouldIntroBeShownStatus] = useShouldIntroBeShown();
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const firstItemWithoutCustomerDecision = checkout?.items.find((item) => [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status));
+    const introRouteMatch = useMatch(`${basePath}/${Routes.INTRO}`);
+    const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
+    const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
+        dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded) {
+        return loader;
+    }
+    if (shouldIntroBeShown && !introShown.current) {
+        if (introRouteMatch) {
+            introShown.current = true;
+        }
+        else {
+            return React.createElement(Navigate, { to: `${basePath}/${Routes.INTRO}`, replace: true });
+        }
+    }
+    else {
+        if (itemRouteMatch) {
+            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch.params.id);
+            if (!checkoutItem) {
+                return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
+            }
+        }
+        if (firstItemWithoutCustomerDecision && !itemRouteMatch) {
+            return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
+        }
+        if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch) {
+            return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
+        }
+    }
+    return children;
+};
+export { CheckoutMiddleware };

package/dist/infrastructure/ui/routing/Routing.d.ts

@@ -0,0 +1,12 @@
+import { I18n } from "@lookiero/i18n-react";
+import { FC } from "react";
+interface RoutingProps {
+    readonly onNotAccessible: () => void;
+    readonly customerId: string | undefined;
+    readonly locale: string;
+    readonly I18n: I18n;
+    readonly basePath?: string;
+    readonly onI18nError?: (err: Error) => void;
+}
+declare const Routing: FC<RoutingProps>;
+export { Routing };

package/dist/infrastructure/ui/routing/Routing.js

@@ -0,0 +1,45 @@
+import React, { lazy, Suspense } from "react";
+import { Navigate, Outlet, useRoutes } from "react-router-native";
+import { Spinner } from "../shared/components/atoms/spinner/Spinner";
+import { App } from "../views/App";
+import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+import { CheckoutMiddleware } from "./CheckoutMiddleware";
+import { Routes } from "./routes";
+const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ default: module.Intro })));
+const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
+const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
+const Routing = ({ basePath = "", onNotAccessible, customerId, locale, I18n, onI18nError }) => {
+    const routes = useRoutes([
+        {
+            path: "",
+            element: (React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible },
+                React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
+                    React.createElement(CheckoutMiddleware, { basePath: basePath, customerId: customerId },
+                        React.createElement(App, null,
+                            React.createElement(Outlet, null)))))),
+            children: [
+                {
+                    path: Routes.INTRO,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Intro, { customerId: customerId }))),
+                },
+                {
+                    path: Routes.ITEM,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Item, { customerId: customerId }))),
+                },
+                {
+                    path: Routes.SUMMARY,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Summary, { customerId: customerId }))),
+                },
+                {
+                    path: "*",
+                    element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
+                },
+            ],
+        },
+    ]);
+    return routes;
+};
+export { Routing };

package/dist/infrastructure/ui/routing/router/Router.d.ts

@@ -0,0 +1 @@
+export { BrowserRouter as Router } from "react-router-dom";

package/dist/infrastructure/ui/routing/router/Router.js

@@ -0,0 +1 @@
+export { BrowserRouter as Router } from "react-router-dom";

package/dist/infrastructure/ui/routing/router/Router.native.d.ts

@@ -0,0 +1 @@
+export { NativeRouter as Router } from "react-router-native";

package/dist/infrastructure/ui/routing/router/Router.native.js

@@ -0,0 +1 @@
+export { NativeRouter as Router } from "react-router-native";

package/dist/infrastructure/ui/routing/routes.d.ts

@@ -0,0 +1,6 @@
+export declare enum Routes {
+    HOME = "",
+    INTRO = "intro",
+    ITEM = "item/:id",
+    SUMMARY = "summary"
+}

package/dist/infrastructure/ui/routing/routes.js

@@ -0,0 +1,7 @@
+export var Routes;
+(function (Routes) {
+    Routes["HOME"] = "";
+    Routes["INTRO"] = "intro";
+    Routes["ITEM"] = "item/:id";
+    Routes["SUMMARY"] = "summary";
+})(Routes || (Routes = {}));

package/dist/infrastructure/ui/settings/UISettings.d.ts

@@ -0,0 +1,4 @@
+declare enum UISettings {
+    INTRO_SHOWN_COUNT = "INTRO_SHOWN_COUNT"
+}
+export { UISettings };

package/dist/infrastructure/ui/settings/UISettings.js

@@ -0,0 +1,5 @@
+var UISettings;
+(function (UISettings) {
+    UISettings["INTRO_SHOWN_COUNT"] = "INTRO_SHOWN_COUNT";
+})(UISettings || (UISettings = {}));
+export { UISettings };

package/dist/infrastructure/ui/shared/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/shared/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, { level: 2, style: [style.error, customStyle], detail: true }, error));
+export { Error };

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

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

package/dist/infrastructure/ui/shared/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/shared/components/atoms/field/Field.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+declare type FieldStyle = {
+    readonly field: StyleProp<ViewStyle>;
+    readonly fieldText: StyleProp<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/shared/components/atoms/field/Field.js

@@ -0,0 +1,29 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { animated, useSpring } from "@react-spring/native";
+import React from "react";
+import { View } from "react-native";
+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: [
+            {
+                transform: [
+                    {
+                        scale: springs.scale,
+                    },
+                    {
+                        translateY: springs.translateY,
+                    },
+                    {
+                        translateX: springs.translateX,
+                    },
+                ],
+            },
+            customStyle?.field,
+        ] },
+        React.createElement(Text, { level: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
+        React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
+};
+export { Field };

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

@@ -0,0 +1,14 @@
+declare const style: {
+    fieldBackground: {
+        backgroundColor: string;
+        height: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+    fieldText: {
+        paddingHorizontal: number;
+        zIndex: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorBase, spaceS } = theme();
+const style = StyleSheet.create({
+    fieldBackground: {
+        backgroundColor: colorBase,
+        height: "100%",
+        position: "absolute",
+        width: "100%",
+        zIndex: 0,
+    },
+    fieldText: {
+        paddingHorizontal: spaceS,
+        zIndex: 1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.d.ts

@@ -0,0 +1,12 @@
+import glyphs from "@lookiero/aurora-iconfont/dist/glyphs.json";
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+declare type IconStyle = StyleProp<TextStyle>;
+declare type IconName = keyof typeof glyphs;
+interface IconProps {
+    readonly name: IconName;
+    readonly style?: IconStyle;
+}
+declare const Icon: FC<IconProps>;
+export type { IconName, IconStyle };
+export { Icon };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { Text } from "react-native";
+import { theme } from "../../../../theme/theme";
+import { style } from "./Icon.style";
+const { iconGlyphs } = theme();
+const Icon = ({ name, style: customStyle }) => (React.createElement(Text, { accessibilityElementsHidden: true, allowFontScaling: false, importantForAccessibility: "no", selectable: false, style: [style.icon, customStyle], testID: "icon" }, String.fromCharCode(iconGlyphs[name])));
+export { Icon };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    icon: {
+        fontFamily: string;
+        fontSize: number;
+        fontStyle: "normal";
+        fontWeight: "normal";
+        height: number;
+        minHeight: number;
+        minWidth: number;
+        width: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/atoms/icon/Icon.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { iconFamily, iconSize } = theme();
+const style = StyleSheet.create({
+    icon: {
+        fontFamily: iconFamily,
+        fontSize: iconSize,
+        fontStyle: "normal",
+        fontWeight: "normal",
+        height: iconSize,
+        minHeight: iconSize,
+        minWidth: iconSize,
+        width: iconSize,
+    },
+});
+export { style };

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

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

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

@@ -0,0 +1,37 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Platform, TextInput, } from "react-native";
+import { theme } from "../../../../theme/theme";
+import { style, borderSize, paddingVertical } from "./Input.style";
+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 [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 (!multiline || Platform.OS === "web") {
+            return;
+        }
+        const nativePadding = Platform.OS === "ios" ? paddingVertical * 2 : 0;
+        setHeight(clamp(minHeight, maxHeight, event.nativeEvent.contentSize.height + borderSize * 2 + nativePadding));
+    }, [maxHeight, minHeight, multiline, onContentSizeChange]);
+    const handleOnContentSizeChangeWeb = useCallback(() => {
+        if (!multiline || Platform.OS !== "web") {
+            return;
+        }
+        window.requestAnimationFrame(() => {
+            const element = textInputRef.current;
+            if (!element) {
+                return;
+            }
+            element.style.height = "0px";
+            element.style.height = `${clamp(minHeight, maxHeight, element.scrollHeight + borderSize * 2)}px`;
+        });
+    }, [maxHeight, minHeight, multiline]);
+    useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
+    const textInputRef = useRef(null);
+    return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
+};
+export { Input };

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

@@ -0,0 +1,19 @@
+declare const borderSize: number;
+declare const paddingVertical: number;
+declare const style: {
+    input: {
+        lineHeight?: number | undefined;
+        borderWidth: number;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+        letterSpacing: number;
+        outlineStyle: string;
+        paddingBottom: number;
+        paddingHorizontal: number;
+        paddingTop: number;
+        textOverflow: string;
+        whiteSpace: string;
+    };
+};
+export { style, borderSize, paddingVertical };

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

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

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const Spinner: FC;
+export { Spinner };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { ActivityIndicator, View } from "react-native";
+import { theme } from "../../../../theme/theme";
+import { style } from "./Spinner.style";
+const { colorPrimary } = theme();
+const Spinner = () => (React.createElement(View, { style: style.container },
+    React.createElement(ActivityIndicator, { color: colorPrimary, size: "large" })));
+export { Spinner };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        display: "flex";
+        flex: number;
+        justifyContent: "center";
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        display: "flex",
+        flex: 1,
+        justifyContent: "center",
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { ViewProps } from "react-native";
+import { ScreenSize } from "../../../hooks/useScreenSize";
+declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
+interface ColumnProps extends ViewProps {
+    readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
+}
+declare const Column: FC<ColumnProps>;
+export type { ColumnSize };
+export { Column };