@lookiero/checkout 5.3.0-beta.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/package.json +1 -1
  2. package/dist/infrastructure/ui/components/layouts/banner/Banner.d.ts +0 -7
  3. package/dist/infrastructure/ui/components/layouts/banner/Banner.js +0 -8
  4. package/dist/infrastructure/ui/components/layouts/banner/Banner.style.d.ts +0 -9
  5. package/dist/infrastructure/ui/components/layouts/banner/Banner.style.js +0 -12
  6. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.d.ts +0 -4
  7. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.js +0 -1
  8. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.d.ts +0 -3
  9. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.js +0 -27
  10. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.d.ts +0 -6
  11. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.js +0 -9
  12. package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts +0 -9
  13. package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js +0 -12
  14. package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.d.ts +0 -7
  15. package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.js +0 -8
  16. package/dist/infrastructure/ui/theme/theme.d.ts +0 -10
  17. package/dist/infrastructure/ui/theme/theme.js +0 -3
  18. package/dist/infrastructure/ui/views/notFound/NotFound.d.ts +0 -10
  19. package/dist/infrastructure/ui/views/notFound/NotFound.js +0 -40
  20. package/dist/infrastructure/ui/views/notFound/NotFound.style.d.ts +0 -17
  21. package/dist/infrastructure/ui/views/notFound/NotFound.style.js +0 -20
  22. package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.d.ts +0 -6
  23. package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js +0 -15
  24. package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.d.ts +0 -9
  25. package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js +0 -12
  26. package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.d.ts +0 -4
  27. package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.js +0 -5
  28. package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.d.ts +0 -4
  29. package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.js +0 -5
  30. package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts +0 -6
  31. package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js +0 -9
  32. package/dist/shared/ui/components/atoms/icon/Icon.d.ts +0 -14
  33. package/dist/shared/ui/components/atoms/icon/Icon.js +0 -4
  34. package/dist/shared/ui/components/atoms/icon/Icon.style.d.ts +0 -13
  35. package/dist/shared/ui/components/atoms/icon/Icon.style.js +0 -16
  36. package/dist/shared/ui/components/atoms/input/Input.d.ts +0 -11
  37. package/dist/shared/ui/components/atoms/input/Input.js +0 -37
  38. package/dist/shared/ui/components/atoms/input/Input.style.d.ts +0 -21
  39. package/dist/shared/ui/components/atoms/input/Input.style.js +0 -28
  40. package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.d.ts +0 -16
  41. package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.js +0 -7
  42. package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.d.ts +0 -8
  43. package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.js +0 -11
  44. package/dist/shared/ui/components/molecules/selectField/SelectField.d.ts +0 -27
  45. package/dist/shared/ui/components/molecules/selectField/SelectField.js +0 -28
  46. package/dist/shared/ui/components/molecules/selectField/SelectField.style.d.ts +0 -19
  47. package/dist/shared/ui/components/molecules/selectField/SelectField.style.js +0 -22
  48. package/dist/shared/ui/components/molecules/toast/Toast.d.ts +0 -25
  49. package/dist/shared/ui/components/molecules/toast/Toast.js +0 -22
  50. package/dist/shared/ui/components/molecules/toast/Toast.style.d.ts +0 -34
  51. package/dist/shared/ui/components/molecules/toast/Toast.style.js +0 -34
  52. /package/dist/infrastructure/testing/{asyncKameleoon.d.ts → AsyncKameleoon.d.ts} +0 -0
  53. /package/dist/infrastructure/testing/{asyncKameleoon.js → AsyncKameleoon.js} +0 -0
  54. /package/dist/infrastructure/testing/{kameleoon.d.ts → Kameleoon.d.ts} +0 -0
  55. /package/dist/infrastructure/testing/{kameleoon.js → Kameleoon.js} +0 -0
  56. /package/dist/infrastructure/testing/react/{kameleoon.d.ts → Kameleoon.d.ts} +0 -0
  57. /package/dist/infrastructure/testing/react/{kameleoon.js → Kameleoon.js} +0 -0
  58. /package/dist/infrastructure/testing/react/{kameleoon.web.d.ts → Kameleoon.web.d.ts} +0 -0
  59. /package/dist/infrastructure/testing/react/{kameleoon.web.js → Kameleoon.web.js} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "5.3.0-beta.1",
3
+ "version": "5.3.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -1,7 +0,0 @@
1
- import { FC, ReactNode } from "react";
2
- interface BannerProps {
3
- readonly children?: ReactNode;
4
- readonly text: string;
5
- }
6
- declare const Banner: FC<BannerProps>;
7
- export { Banner };
@@ -1,8 +0,0 @@
1
- import { ALIGN, Text } from "@lookiero/aurora";
2
- import React from "react";
3
- import { View } from "react-native";
4
- import { style } from "./Banner.style";
5
- const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
6
- React.createElement(Text, { align: ALIGN.CENTER, level: 2, detail: true }, text),
7
- children));
8
- export { Banner };
@@ -1,9 +0,0 @@
1
- declare const style: {
2
- container: {
3
- alignItems: "center";
4
- backgroundColor: string;
5
- paddingHorizontal: number;
6
- paddingVertical: number;
7
- };
8
- };
9
- export { style };
@@ -1,12 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../theme/theme";
3
- const { colorInfo, spaceM, spaceL } = theme();
4
- const style = StyleSheet.create({
5
- container: {
6
- alignItems: "center",
7
- backgroundColor: colorInfo,
8
- paddingHorizontal: spaceL,
9
- paddingVertical: spaceM,
10
- },
11
- });
12
- export { style };
@@ -1,4 +0,0 @@
1
- import { FC } from "react";
2
- import { SvgProps } from "react-native-svg";
3
- type Icon = FC<SvgProps>;
4
- export type { Icon };
@@ -1,3 +0,0 @@
1
- import { ReturnQuestionItem } from "../ReturnQuestionItem";
2
- declare const HostStackReturnQuestionItem: ReturnQuestionItem;
3
- export { HostStackReturnQuestionItem };
@@ -1,27 +0,0 @@
1
- import { COLOR, Text } from "@lookiero/aurora";
2
- import { useIntl } from "@lookiero/i18n-react";
3
- import { animated, useSpring } from "@react-spring/native";
4
- import React, { useCallback, useMemo, useState } from "react";
5
- import { View } from "react-native";
6
- import ReturnQuestion from "../../ReturnQuestion";
7
- import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
8
- import { style } from "./HostStackReturnQuestionItem.style";
9
- const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
10
- const { formatMessage } = useIntl();
11
- const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
12
- const feedbackReturnQuestion = feedback
13
- ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
14
- : undefined;
15
- const titleText = useMemo(() => (returnQuestion.name ? formatMessage({ id: returnQuestion.name }) : undefined), [formatMessage, returnQuestion.name]);
16
- const feedbackText = useMemo(() => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.name }) : undefined), [feedbackReturnQuestion, formatMessage]);
17
- const [stackHeight, setStackHeight] = useState();
18
- const handleOnLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setStackHeight(height), []);
19
- const stackSyle = useSpring({ height: stackHeight });
20
- return (React.createElement(animated.View, { style: stackSyle },
21
- React.createElement(View, { onLayout: handleOnLayout },
22
- titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
23
- feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
24
- React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
25
- feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id }))))) : (children))));
26
- };
27
- export { HostStackReturnQuestionItem };
@@ -1,6 +0,0 @@
1
- declare const style: {
2
- title: {
3
- marginBottom: number;
4
- };
5
- };
6
- export { style };
@@ -1,9 +0,0 @@
1
- import { Theme } from "@lookiero/aurora";
2
- import { StyleSheet } from "react-native";
3
- const { space1 } = Theme.get();
4
- const style = StyleSheet.create({
5
- title: {
6
- marginBottom: space1,
7
- },
8
- });
9
- export { style };
@@ -1,9 +0,0 @@
1
- declare const HEADER_HEIGHT: number;
2
- declare const style: {
3
- logo: {
4
- left: number;
5
- position: "absolute";
6
- top: number;
7
- };
8
- };
9
- export { style, HEADER_HEIGHT };
@@ -1,12 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { spaceXXXL } = theme();
4
- const HEADER_HEIGHT = spaceXXXL;
5
- const style = StyleSheet.create({
6
- logo: {
7
- left: 0,
8
- position: "absolute",
9
- top: 0,
10
- },
11
- });
12
- export { style, HEADER_HEIGHT };
@@ -1,7 +0,0 @@
1
- declare const style: {
2
- logo: {
3
- height: number;
4
- width: number;
5
- };
6
- };
7
- export { style };
@@ -1,8 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- const style = StyleSheet.create({
3
- logo: {
4
- height: 54,
5
- width: 217,
6
- },
7
- });
8
- export { style };
@@ -1,10 +0,0 @@
1
- import { DefaultTheme } from "@lookiero/aurora";
2
- type Remove$PrefixFromKeys<T> = {
3
- [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
4
- };
5
- type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
6
- interface ThemeFunction {
7
- (): AuroraTheme;
8
- }
9
- declare const theme: ThemeFunction;
10
- export { theme };
@@ -1,3 +0,0 @@
1
- import { Theme } from "@lookiero/aurora";
2
- const theme = () => Theme.get();
3
- export { theme };
@@ -1,10 +0,0 @@
1
- import { FC } from "react";
2
- import { Country } from "../../../../projection/shared/country";
3
- import { Layout } from "../../components/layouts/layout/Layout";
4
- interface NotFoundProps {
5
- readonly customerId: string;
6
- readonly country: Country;
7
- readonly layout: Layout;
8
- }
9
- declare const NotFound: FC<NotFoundProps>;
10
- export { NotFound };
@@ -1,40 +0,0 @@
1
- import { Button, Text } from "@lookiero/aurora";
2
- import { useI18nMessage } from "@lookiero/i18n-react";
3
- import { QueryStatus } from "@lookiero/messaging-react";
4
- import React, { useCallback } from "react";
5
- import { Image } from "react-native";
6
- import { useNavigate } from "react-router-native";
7
- import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
8
- import { AspectRatioView } from "../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
9
- import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
10
- import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
11
- import { TrackingPage } from "../../../tracking/tracking";
12
- import { Body } from "../../components/layouts/body/Body";
13
- import { I18nMessages } from "../../i18n/i18n";
14
- import { Routes } from "../../routing/routes";
15
- import { useBasePath } from "../../routing/useBasePath";
16
- import { style } from "./NotFound.style";
17
- const NotFound = ({ customerId, country, layout: Layout }) => {
18
- const descriptionText = useI18nMessage({ id: I18nMessages.NOT_FOUND_DESCRIPTION });
19
- const buttonText = useI18nMessage({ id: I18nMessages.NOT_FOUND_BUTTON });
20
- const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
21
- useTrackPageView({
22
- page: TrackingPage.NOT_FOUND,
23
- country,
24
- checkoutId: checkout?.id,
25
- });
26
- const navigate = useNavigate();
27
- const basePath = useBasePath();
28
- const handleOnPress = useCallback(() => navigate(`${basePath}/${Routes.HOME}`), [basePath, navigate]);
29
- const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
30
- const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
31
- if (!dependenciesLoaded)
32
- return React.createElement(Spinner, null);
33
- return (React.createElement(Layout, { style: { scrollView: style.container } },
34
- React.createElement(Body, { style: { column: style.bodyColumn } },
35
- React.createElement(AspectRatioView, { aspectRatio: 1.25 },
36
- React.createElement(Image, { resizeMode: "contain", source: require("../../../../public/images/not-found.png"), style: style.image, testID: "not-found-image" })),
37
- React.createElement(Text, { level: 1, style: style.description }, descriptionText),
38
- React.createElement(Button, { onPress: handleOnPress }, buttonText))));
39
- };
40
- export { NotFound };
@@ -1,17 +0,0 @@
1
- declare const style: {
2
- bodyColumn: {
3
- paddingHorizontal: number;
4
- };
5
- container: {
6
- flex: number;
7
- paddingBottom: number;
8
- };
9
- description: {
10
- marginBottom: number;
11
- textAlign: "center";
12
- };
13
- image: {
14
- flex: number;
15
- };
16
- };
17
- export { style };
@@ -1,20 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../theme/theme";
3
- const { spaceXL, spaceXXL } = theme();
4
- const style = StyleSheet.create({
5
- bodyColumn: {
6
- paddingHorizontal: spaceXL,
7
- },
8
- container: {
9
- flex: 1,
10
- paddingBottom: spaceXXL,
11
- },
12
- description: {
13
- marginBottom: spaceXL,
14
- textAlign: "center",
15
- },
16
- image: {
17
- flex: 1,
18
- },
19
- });
20
- export { style };
@@ -1,6 +0,0 @@
1
- import { FC } from "react";
2
- interface FiveItemsDiscountBannerProps {
3
- readonly fiveItemsDiscount: number;
4
- }
5
- declare const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps>;
6
- export { FiveItemsDiscountBanner };
@@ -1,15 +0,0 @@
1
- import { Text } from "@lookiero/aurora";
2
- import { useI18nMessage } from "@lookiero/i18n-react";
3
- import React from "react";
4
- import { View } from "react-native";
5
- import { I18nMessages } from "../../../../i18n/i18n";
6
- import { style } from "./FiveItemsDiscountBanner.style";
7
- const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
8
- const bannerText = useI18nMessage({
9
- id: I18nMessages.SUMMARY_BANNER,
10
- values: { discount: fiveItemsDiscount.toString() },
11
- });
12
- return (React.createElement(View, { style: style.container },
13
- React.createElement(Text, { level: 3 }, bannerText)));
14
- };
15
- export { FiveItemsDiscountBanner };
@@ -1,9 +0,0 @@
1
- declare const style: {
2
- container: {
3
- alignItems: "center";
4
- backgroundColor: string;
5
- paddingHorizontal: number;
6
- paddingVertical: number;
7
- };
8
- };
9
- export { style };
@@ -1,12 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { colorAccent, spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- container: {
6
- alignItems: "center",
7
- backgroundColor: colorAccent,
8
- paddingHorizontal: spaceXL,
9
- paddingVertical: 12,
10
- },
11
- });
12
- export { style };
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { SvgProps } from "react-native-svg";
3
- declare const ArrowDown: (props: SvgProps) => JSX.Element;
4
- export { ArrowDown };
@@ -1,5 +0,0 @@
1
- import * as React from "react";
2
- import Svg, { Path } from "react-native-svg";
3
- const ArrowDown = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
4
- React.createElement(Path, { d: "M1.198 1.23 28.27 8.698M55.802 1.23 28.73 8.698", strokeLinecap: "round", strokeWidth: 2 })));
5
- export { ArrowDown };
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { SvgProps } from "react-native-svg";
3
- declare const ArrowUp: (props: SvgProps) => JSX.Element;
4
- export { ArrowUp };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import Svg, { Path } from "react-native-svg";
3
- const ArrowUp = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
4
- React.createElement(Path, { d: "M1.698 8.77 28.77 1.302M56.302 8.77 29.23 1.302", strokeLinecap: "round", strokeWidth: 2 })));
5
- export { ArrowUp };
@@ -1,6 +0,0 @@
1
- declare const style: {
2
- container: {
3
- paddingHorizontal: number;
4
- };
5
- };
6
- export { style };
@@ -1,9 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- container: {
6
- paddingHorizontal: spaceXL,
7
- },
8
- });
9
- export { style };
@@ -1,14 +0,0 @@
1
- import { COLOR } from "@lookiero/aurora";
2
- import glyphs from "@lookiero/aurora-iconfont/dist/glyphs.json";
3
- import { FC } from "react";
4
- import { StyleProp, TextStyle } from "react-native";
5
- type IconStyle = StyleProp<TextStyle>;
6
- type IconName = keyof typeof glyphs;
7
- interface IconProps {
8
- readonly color?: COLOR;
9
- readonly name: IconName;
10
- readonly style?: IconStyle;
11
- }
12
- declare const Icon: FC<IconProps>;
13
- export type { IconName, IconStyle };
14
- export { Icon };
@@ -1,4 +0,0 @@
1
- import { Icon as AuroraIcon } from "@lookiero/aurora";
2
- import React from "react";
3
- const Icon = ({ color, name, style: customStyle }) => (React.createElement(AuroraIcon, { color: color, name: name, style: customStyle, testID: "icon" }));
4
- export { Icon };
@@ -1,13 +0,0 @@
1
- declare const style: {
2
- icon: {
3
- fontFamily: string;
4
- fontSize: number;
5
- fontStyle: "normal";
6
- fontWeight: "normal";
7
- height: number;
8
- minHeight: number;
9
- minWidth: number;
10
- width: number;
11
- };
12
- };
13
- export { style };
@@ -1,16 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { iconFamily, iconSize } = theme();
4
- const style = StyleSheet.create({
5
- icon: {
6
- fontFamily: iconFamily,
7
- fontSize: iconSize,
8
- fontStyle: "normal",
9
- fontWeight: "normal",
10
- height: iconSize,
11
- minHeight: iconSize,
12
- minWidth: iconSize,
13
- width: iconSize,
14
- },
15
- });
16
- export { style };
@@ -1,11 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, TextInputProps, TextStyle } from "react-native";
3
- type InputStyle = StyleProp<TextStyle>;
4
- interface InputProps extends TextInputProps {
5
- readonly minHeight?: number;
6
- readonly maxHeight?: number;
7
- readonly style?: InputStyle;
8
- }
9
- declare const Input: FC<InputProps>;
10
- export type { InputProps, InputStyle };
11
- export { Input };
@@ -1,37 +0,0 @@
1
- import { Theme } from "@lookiero/aurora";
2
- import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
3
- import { Platform, TextInput, } from "react-native";
4
- import { style, borderWidth1, paddingVertical } from "./Input.style";
5
- const MIN_HEIGHT = 56;
6
- const MAX_HEIGHT = 242; // 10 lines
7
- const { colorTextMedium } = Theme.get();
8
- const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
9
- const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorTextMedium, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
10
- const [height, setHeight] = useState(minHeight);
11
- // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
12
- const handleOnContentSizeChange = useCallback((event) => {
13
- onContentSizeChange?.(event);
14
- if (!multiline || Platform.OS === "web") {
15
- return;
16
- }
17
- const nativePadding = Platform.OS === "ios" ? paddingVertical * 2 : 0;
18
- setHeight(clamp(minHeight, maxHeight, event.nativeEvent.contentSize.height + borderWidth1 * 2 + nativePadding));
19
- }, [maxHeight, minHeight, multiline, onContentSizeChange]);
20
- const handleOnContentSizeChangeWeb = useCallback(() => {
21
- if (!multiline || Platform.OS !== "web") {
22
- return;
23
- }
24
- window.requestAnimationFrame(() => {
25
- const element = textInputRef.current;
26
- if (!element) {
27
- return;
28
- }
29
- element.style.height = "0px";
30
- element.style.height = `${clamp(minHeight, maxHeight, element.scrollHeight + borderWidth1 * 2)}px`;
31
- });
32
- }, [maxHeight, minHeight, multiline]);
33
- useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
34
- const textInputRef = useRef(null);
35
- 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 }));
36
- };
37
- export { Input };
@@ -1,21 +0,0 @@
1
- declare const borderWidth1: number;
2
- declare const paddingVertical: number;
3
- declare const style: {
4
- input: {
5
- lineHeight?: number | undefined;
6
- textOverflow?: string | undefined;
7
- appearance?: string | undefined;
8
- outlineWidth?: number | undefined;
9
- borderRadius: number;
10
- borderWidth: number;
11
- color: string;
12
- display: "flex";
13
- fontFamily: string;
14
- fontSize: number;
15
- letterSpacing: number;
16
- paddingBottom: number;
17
- paddingHorizontal: number;
18
- paddingTop: number;
19
- };
20
- };
21
- export { style, borderWidth1, paddingVertical };
@@ -1,28 +0,0 @@
1
- import { Theme } from "@lookiero/aurora";
2
- import { Platform, StyleSheet } from "react-native";
3
- const { borderRadius2, borderWidth1, colorText, fontBodyHeight3, fontBodyLetterSpacing3, fontBodySize3, fontMap, space4, } = Theme.get();
4
- const paddingVertical = space4;
5
- // paddingVertical not working in iOS in multiline mode
6
- const style = StyleSheet.create({
7
- input: {
8
- borderRadius: borderRadius2,
9
- borderWidth: borderWidth1,
10
- color: colorText,
11
- display: "flex",
12
- fontFamily: fontMap.Body,
13
- fontSize: fontBodySize3,
14
- letterSpacing: fontBodyLetterSpacing3,
15
- paddingBottom: paddingVertical,
16
- paddingHorizontal: space4,
17
- paddingTop: paddingVertical,
18
- ...Platform.select({
19
- web: {
20
- lineHeight: fontBodyHeight3,
21
- textOverflow: "ellipsis",
22
- appearance: "none",
23
- outlineWidth: 0,
24
- },
25
- }),
26
- },
27
- });
28
- export { style, borderWidth1, paddingVertical };
@@ -1,16 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, TouchableHighlightProps, ViewStyle } from "react-native";
3
- import { IconName, IconStyle } from "../../atoms/icon/Icon";
4
- interface ButtonIconStyle {
5
- readonly button: StyleProp<ViewStyle>;
6
- readonly icon: IconStyle;
7
- }
8
- interface ButtonIconBaseProps {
9
- readonly name: IconName;
10
- readonly testID?: string;
11
- readonly style?: Partial<ButtonIconStyle>;
12
- }
13
- interface ButtonIconProps extends Omit<TouchableHighlightProps, keyof ButtonIconBaseProps>, ButtonIconBaseProps {
14
- }
15
- declare const ButtonIcon: FC<ButtonIconProps>;
16
- export { ButtonIcon };
@@ -1,7 +0,0 @@
1
- import React from "react";
2
- import { TouchableHighlight } from "react-native";
3
- import { Icon } from "../../atoms/icon/Icon";
4
- import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
5
- const ButtonIcon = ({ name, style: customStyle, testID = "button-icon", onPress, ...restProps }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], testID: testID, underlayColor: buttonIconUnderlayColor, onPress: onPress, ...restProps },
6
- React.createElement(Icon, { name: name, style: customStyle?.icon })));
7
- export { ButtonIcon };
@@ -1,8 +0,0 @@
1
- declare const buttonIconUnderlayColor: string;
2
- declare const style: {
3
- buttonIcon: {
4
- flexGrow: number;
5
- padding: number;
6
- };
7
- };
8
- export { style, buttonIconUnderlayColor };
@@ -1,11 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { spaceS, colorGrayscaleS } = theme();
4
- const buttonIconUnderlayColor = colorGrayscaleS;
5
- const style = StyleSheet.create({
6
- buttonIcon: {
7
- flexGrow: 0,
8
- padding: spaceS,
9
- },
10
- });
11
- export { style, buttonIconUnderlayColor };
@@ -1,27 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, TextStyle, TouchableHighlightProps, ViewStyle } from "react-native";
3
- import { InputFieldStyle } from "../inputField/InputField";
4
- interface SelectFieldStyle {
5
- readonly selectField: StyleProp<ViewStyle>;
6
- readonly modalContent: StyleProp<ViewStyle>;
7
- readonly option: StyleProp<ViewStyle>;
8
- readonly optionText: StyleProp<TextStyle>;
9
- readonly inputField: Partial<InputFieldStyle>;
10
- }
11
- interface Option {
12
- readonly label: string;
13
- readonly value: string;
14
- }
15
- interface SelectFieldBaseProps {
16
- readonly title?: string;
17
- readonly placeholder: string;
18
- readonly value: string | undefined;
19
- readonly options: Option[];
20
- readonly style?: Partial<SelectFieldStyle>;
21
- readonly onChange?: (value: string) => void;
22
- }
23
- interface SelectFieldProps extends Omit<TouchableHighlightProps, keyof SelectFieldBaseProps>, SelectFieldBaseProps {
24
- }
25
- declare const SelectField: FC<SelectFieldProps>;
26
- export type { Option };
27
- export { SelectField };
@@ -1,28 +0,0 @@
1
- import { COLOR, Text } from "@lookiero/aurora";
2
- import React, { useCallback, useMemo, useState } from "react";
3
- import { TouchableHighlight, View } from "react-native";
4
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
5
- import { Modal } from "../../layouts/modal/Modal";
6
- import { InputField } from "../inputField/InputField";
7
- import { style } from "./SelectField.style";
8
- const { colorGrayscaleS } = theme();
9
- const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, testID, ...touchableRestProps }) => {
10
- const [modalVisible, setModalVisible] = useState(false);
11
- const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
12
- const handleOnModalClose = useCallback(() => setModalVisible(false), []);
13
- const handleOnPressOption = useCallback((value) => {
14
- onChange(value);
15
- handleOnModalClose();
16
- }, [handleOnModalClose, onChange]);
17
- const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
18
- return (React.createElement(React.Fragment, null,
19
- React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: customStyle?.selectField, testID: testID, underlayColor: colorGrayscaleS, accessible: true, onPress: handleOnPressSelectField, ...touchableRestProps },
20
- React.createElement(View, { pointerEvents: "none" },
21
- React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
22
- React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
23
- React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
24
- title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
25
- 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 },
26
- React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
27
- };
28
- export { SelectField };
@@ -1,19 +0,0 @@
1
- declare const style: {
2
- modalContent: {
3
- paddingBottom: number;
4
- paddingHorizontal: number;
5
- };
6
- modalTitle: {
7
- marginBottom: number;
8
- textAlign: "center";
9
- };
10
- option: {
11
- borderBottomColor: string;
12
- borderBottomWidth: number;
13
- paddingVertical: number;
14
- };
15
- optionText: {
16
- lineHeight: number;
17
- };
18
- };
19
- export { style };
@@ -1,22 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { borderSize, colorGrayscaleS, spaceM, spaceL, spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- modalContent: {
6
- paddingBottom: spaceL,
7
- paddingHorizontal: spaceXL,
8
- },
9
- modalTitle: {
10
- marginBottom: spaceM,
11
- textAlign: "center",
12
- },
13
- option: {
14
- borderBottomColor: colorGrayscaleS,
15
- borderBottomWidth: borderSize,
16
- paddingVertical: spaceM,
17
- },
18
- optionText: {
19
- lineHeight: 24,
20
- },
21
- });
22
- export { style };
@@ -1,25 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, TextStyle, ViewStyle } from "react-native";
3
- declare enum ToastVariant {
4
- INFO = "INFO",
5
- ERROR = "ERROR",
6
- SUCCESS = "SUCCESS"
7
- }
8
- interface ToastStyle {
9
- readonly toast?: StyleProp<ViewStyle>;
10
- readonly content?: StyleProp<ViewStyle>;
11
- readonly title?: StyleProp<TextStyle>;
12
- readonly body?: StyleProp<TextStyle>;
13
- readonly closeButton?: StyleProp<ViewStyle>;
14
- }
15
- interface ToastProps {
16
- readonly body: string;
17
- readonly title?: string;
18
- readonly onClose?: () => void;
19
- readonly testID?: string;
20
- readonly variant?: ToastVariant;
21
- readonly style?: ToastStyle;
22
- }
23
- declare const Toast: FC<ToastProps>;
24
- export type { ToastStyle };
25
- export { Toast, ToastVariant };
@@ -1,22 +0,0 @@
1
- import { COLOR, Text } from "@lookiero/aurora";
2
- import React from "react";
3
- import { View } from "react-native";
4
- import { useScreenSize } from "../../../hooks/useScreenSize";
5
- import { ButtonIcon } from "../buttonIcon/ButtonIcon";
6
- import { style } from "./Toast.style";
7
- var ToastVariant;
8
- (function (ToastVariant) {
9
- ToastVariant["INFO"] = "INFO";
10
- ToastVariant["ERROR"] = "ERROR";
11
- ToastVariant["SUCCESS"] = "SUCCESS";
12
- })(ToastVariant || (ToastVariant = {}));
13
- const styleVariant = (variant) => variant.toLowerCase();
14
- const Toast = ({ body, title, onClose, testID, variant = ToastVariant.INFO, style: customStyle, }) => {
15
- const screenSize = useScreenSize();
16
- return (React.createElement(View, { style: [style.toast, style[styleVariant(variant)], customStyle?.toast], testID: testID },
17
- React.createElement(View, { style: style.content },
18
- title && (React.createElement(Text, { level: screenSize === "S" ? 3 : 2, style: [style.title, customStyle?.title], testID: "toast-title" }, title)),
19
- React.createElement(Text, { color: COLOR.CONTENT, level: 2, style: customStyle?.body, testID: "toast-body", detail: true }, body)),
20
- onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: [style.button, customStyle?.closeButton] }, testID: "toast-close-button", onPress: onClose }))));
21
- };
22
- export { Toast, ToastVariant };
@@ -1,34 +0,0 @@
1
- declare const style: {
2
- button: {
3
- marginLeft: number;
4
- padding: number;
5
- };
6
- content: {
7
- flex: number;
8
- padding: number;
9
- };
10
- error: {
11
- backgroundColor: string;
12
- };
13
- info: {
14
- backgroundColor: string;
15
- };
16
- success: {
17
- backgroundColor: string;
18
- };
19
- title: {
20
- marginBottom: number;
21
- };
22
- toast: {
23
- alignItems: "flex-start";
24
- flexDirection: "row";
25
- shadowColor: string;
26
- shadowOffset: {
27
- width: number;
28
- height: number;
29
- };
30
- shadowOpacity: number;
31
- shadowRadius: number;
32
- };
33
- };
34
- export { style };
@@ -1,34 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { colorAlert, colorInfo, colorAccent, spaceS, spaceM, elevationColor, elevationOffset, elevationOpacityM, elevationRadius, } = theme();
4
- const style = StyleSheet.create({
5
- button: {
6
- marginLeft: spaceS,
7
- padding: spaceM,
8
- },
9
- content: {
10
- flex: 1,
11
- padding: spaceM,
12
- },
13
- error: {
14
- backgroundColor: colorAlert,
15
- },
16
- info: {
17
- backgroundColor: colorInfo,
18
- },
19
- success: {
20
- backgroundColor: colorAccent,
21
- },
22
- title: {
23
- marginBottom: spaceS,
24
- },
25
- toast: {
26
- alignItems: "flex-start",
27
- flexDirection: "row",
28
- shadowColor: elevationColor,
29
- shadowOffset: elevationOffset,
30
- shadowOpacity: elevationOpacityM,
31
- shadowRadius: elevationRadius,
32
- },
33
- });
34
- export { style };