@swan-io/shared-business 1.0.0

package/src/components/UploadArea.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { FileTile } from "@swan-io/lake/src/components/FileTile";
+import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
+import { backgroundColor, colors, gray75, radii, shadows, spacings, } from "@swan-io/lake/src/constants/design";
+import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
+import { getIconNameFromFilename } from "@swan-io/lake/src/utils/file";
+import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { formatNestedMessage, t } from "@swan-io/shared-business/src/utils/i18n";
+import { Fragment, useLayoutEffect, useRef } from "react";
+import { useDropzone } from "react-dropzone";
+import { StyleSheet, Text, View } from "react-native";
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: backgroundColor.accented,
+        borderWidth: 1,
+        borderColor: colors.gray[200],
+        borderStyle: "dashed",
+        borderRadius: radii[8],
+        padding: spacings[32],
+        cursor: "pointer",
+        alignItems: "center",
+    },
+    disabled: {
+        cursor: "default",
+        backgroundColor: backgroundColor.default,
+    },
+    horizontalContainer: {
+        flexDirection: "row",
+    },
+    icon: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    hoveredContainer: {
+        boxShadow: shadows.tile,
+    },
+    activeContainer: {
+        borderColor: colors.current[500],
+        boxShadow: shadows.tile,
+    },
+    browse: {
+        color: colors.current[500],
+    },
+    browseBlock: {
+        flex: 1,
+    },
+    decorativeIconLeft: {
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        opacity: 0,
+        transform: [{ translateX: "-50%" }, { scale: 0.6 }],
+        transitionProperty: ["opacity", "transform"],
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    decorativeIconLeftHovered: {
+        opacity: 0.3,
+        transform: [{ translateX: "-50%" }, { translateX: -24 }, { scale: 0.6 }, { rotate: "-5deg" }],
+    },
+    decorativeIconRight: {
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        opacity: 0,
+        transform: [{ translateX: "-50%" }, { scale: 0.6 }],
+        transitionProperty: ["opacity", "transform"],
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    decorativeIconRightHovered: {
+        opacity: 0.3,
+        transform: [{ translateX: "-50%" }, { translateX: 24 }, { scale: 0.6 }, { rotate: "5deg" }],
+    },
+    progressBar: {
+        flex: 1,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: gray75,
+    },
+    progress: {
+        height: 4,
+        transitionProperty: "width",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+        borderRadius: 2,
+        backgroundColor: colors.current[500],
+    },
+    item: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: 8,
+        boxShadow: shadows.tile,
+        height: 56,
+        paddingHorizontal: spacings[20],
+    },
+    errorContainer: {
+        borderColor: colors.negative[500],
+    },
+    preview: {
+        aspectRatio: 16 / 4,
+        width: "50%",
+    },
+});
+const UploadAreaPreview = ({ value }) => {
+    const containerRef = useRef(null);
+    useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (element != null) {
+            while (element.firstChild) {
+                element.firstChild.remove();
+            }
+            const previewElement = value.cloneNode(true);
+            element.append(previewElement);
+            previewElement.style.position = "absolute";
+            previewElement.style.top = "0";
+            previewElement.style.left = "0";
+            previewElement.style.width = "100%";
+            previewElement.style.height = "100%";
+            previewElement.style.objectFit = "contain";
+            previewElement.style.objectPosition = "50% 50%";
+        }
+    }, [value]);
+    return _jsx(View, { ref: containerRef, style: styles.preview });
+};
+export const UploadArea = ({ icon, accept, value, documents = [], disabled = false, onRemoveFile, onDropAccepted, onDropRejected, layout = "vertical", description, error, maxSize, }) => {
+    const [isHovered, setIsHovered] = useBoolean(false);
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+        accept: accept.reduce((acc, item) => ({ ...acc, [item]: [] }), {}),
+        onDropAccepted,
+        onDropRejected,
+        disabled,
+        maxSize,
+    });
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx("div", { ...getRootProps(), onMouseEnter: setIsHovered.on, onMouseLeave: setIsHovered.off, children: _jsxs(View, { style: [
+                        styles.container,
+                        disabled && styles.disabled,
+                        layout === "horizontal" && styles.horizontalContainer,
+                        !disabled && isHovered && styles.hoveredContainer,
+                        isDragActive && styles.activeContainer,
+                        (error != null || fileRejections.length > 0) && styles.errorContainer,
+                    ], accessibilityErrorMessage: error != null ? error : fileRejections[0]?.errors.join(", "), children: [_jsx("input", { ...getInputProps() }), isNotNullish(value) ? (value instanceof Element ? (_jsx(UploadAreaPreview, { value: value })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: getIconNameFromFilename(value.name), size: 48, color: disabled ? colors.gray[200] : colors.current[500] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", children: t("uploadArea.droppedFile") }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[200], children: value.name })] })] }))) : (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.icon, children: [_jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                                                styles.decorativeIconLeft,
+                                                (isDragActive || isHovered) && styles.decorativeIconLeftHovered,
+                                            ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                                                styles.decorativeIconRight,
+                                                (isDragActive || isHovered) && styles.decorativeIconRightHovered,
+                                            ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500] })] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", color: disabled ? colors.gray[200] : undefined, children: disabled
+                                                ? t("uploadArea.noValue")
+                                                : formatNestedMessage("uploadArea.dropFile", {
+                                                    browse: _jsx(Text, { style: styles.browse, children: t("uploadArea.browse") }),
+                                                }) }), isNotNullish(error) ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { color: colors.negative[400], align: layout === "horizontal" ? "left" : "center", children: error })] })) : (!disabled &&
+                                            isNotNullish(description) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { align: layout === "horizontal" ? "left" : "center", children: description })] })))] })] }))] }) }), documents.map(({ finished = false, ...document }, index) => {
+                const progress = Math.max(document.progress ?? 0, 3);
+                return (_jsxs(Fragment, { children: [_jsx(Space, { height: index === 0 ? 8 : 4 }), finished ? (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: isNullish(onRemoveFile) ? undefined : () => onRemoveFile(document.id) })) : (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.item, children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], children: t("uploadArea.uploading") }), _jsx(Space, { width: 20 }), _jsx(View, { accessibilityRole: "progressbar", style: styles.progressBar, children: _jsx(View, { style: [styles.progress, { width: `${progress}%` }] }) })] }))] }, document.id));
+            })] }));
+};

package/src/constants/business.d.ts

@@ -0,0 +1,12 @@
+export type BusinessActivity = "AdministrativeServices" | "Agriculture" | "Arts" | "BusinessAndRetail" | "Construction" | "Education" | "ElectricalDistributionAndWaterSupply" | "FinancialAndInsuranceOperations" | "Health" | "Housekeeping" | "InformationAndCommunication" | "LodgingAndFoodServices" | "ManufacturingAndMining" | "Other" | "PublicAdministration" | "RealEstate" | "ScientificActivities" | "Transportation";
+type BusinessActivityEntry = {
+    text: string;
+    value: BusinessActivity;
+};
+export declare const businessActivities: BusinessActivityEntry[];
+export type MonthlyPaymentVolume = "Between10000And50000" | "Between50000And100000" | "LessThan10000" | "MoreThan100000";
+export declare const monthlyPaymentVolumes: {
+    text: string;
+    value: MonthlyPaymentVolume;
+}[];
+export {};

package/src/constants/business.js

@@ -0,0 +1,36 @@
+import { t } from "../utils/i18n";
+const unsortedBusinessActivities = [
+    { text: t("businessActivity.administrativeServices"), value: "AdministrativeServices" },
+    { text: t("businessActivity.agriculture"), value: "Agriculture" },
+    { text: t("businessActivity.arts"), value: "Arts" },
+    { text: t("businessActivity.businessAndRetail"), value: "BusinessAndRetail" },
+    { text: t("businessActivity.construction"), value: "Construction" },
+    { text: t("businessActivity.education"), value: "Education" },
+    {
+        text: t("businessActivity.electricalDistributionAndWaterSupply"),
+        value: "ElectricalDistributionAndWaterSupply",
+    },
+    {
+        text: t("businessActivity.financialAndInsuranceOperations"),
+        value: "FinancialAndInsuranceOperations",
+    },
+    { text: t("businessActivity.health"), value: "Health" },
+    { text: t("businessActivity.housekeeping"), value: "Housekeeping" },
+    { text: t("businessActivity.informationAndCommunication"), value: "InformationAndCommunication" },
+    { text: t("businessActivity.lodgingAndFoodServices"), value: "LodgingAndFoodServices" },
+    { text: t("businessActivity.manufacturingAndMining"), value: "ManufacturingAndMining" },
+    { text: t("businessActivity.publicAdministration"), value: "PublicAdministration" },
+    { text: t("businessActivity.realEstate"), value: "RealEstate" },
+    { text: t("businessActivity.scientificActivities"), value: "ScientificActivities" },
+    { text: t("businessActivity.transportation"), value: "Transportation" },
+];
+export const businessActivities = [
+    ...unsortedBusinessActivities.sort((a, b) => a.text.localeCompare(b.text)),
+    { text: t("businessActivity.other"), value: "Other" },
+];
+export const monthlyPaymentVolumes = [
+    { text: t("monthlyPaymentVolume.lessThan10000"), value: "LessThan10000" },
+    { text: t("monthlyPaymentVolume.between10000And50000"), value: "Between10000And50000" },
+    { text: t("monthlyPaymentVolume.between50000And100000"), value: "Between50000And100000" },
+    { text: t("monthlyPaymentVolume.moreThan100000"), value: "MoreThan100000" },
+];