@swan-io/lake 2.4.0 → 2.5.0

package/src/assets/3d-card/shaders/shinyColorFragment.glsl

@@ -0,0 +1,11 @@
+float red = cameraPosition.x * cameraPosition.z;
+float green = cameraPosition.y * cameraPosition.z;
+float blue = 0.1;
+
+red = sin(red / 5.0) + 1.0 / 2.0;
+green = sin(green / 5.0) + 1.0 / 2.0;
+
+vec3 shinyColor = vec3(red, green, blue);
+float shinyFactor = 0.35;
+
+diffuseColor.rgb = mix(diffuseColor.rgb, shinyColor, shinyFactor);

package/src/components/AutoWidthImage.d.ts

@@ -18,7 +18,7 @@ export declare const AutoWidthImage: import("react").MemoExoticComponent<import(
     borderBottomLeftRadius?: number | undefined;
     borderBottomRightRadius?: number | undefined;
     resizeMode?: import("react-native").ImageResizeMode | undefined;
-    resizeMethod?: "auto" | "resize" | "scale" | undefined;
+    resizeMethod?: "auto" | "scale" | "resize" | undefined;
     src?: string | undefined;
     srcSet?: string | undefined;
     loadingIndicatorSource?: import("react-native").ImageURISource | undefined;

package/src/components/Card3dPreview.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import * as THREE from "three";
+type CardParams = {
+    ownerName: string;
+    cardNumber: string;
+    expirationDate: string;
+    cvv: string;
+    color: "Silver" | "Black";
+    logo: SVGElement | null;
+    logoScale: number;
+    onSvgError?: (code: string) => void;
+};
+type Props = CardParams & {
+    autoRotationDuration?: number;
+};
+declare const _default: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default _default;
+type CardProps = JSX.IntrinsicElements["group"] & CardParams;
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<THREE.Group>>;

package/src/components/Card3dPreview.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Environment, OrbitControls, Text, useGLTF, useTexture } from "@react-three/drei";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { match } from "ts-pattern";
+import envNxUrl from "../assets/3d-card/environment/nx.png?url";
+import envNyUrl from "../assets/3d-card/environment/ny.png?url";
+import envNzUrl from "../assets/3d-card/environment/nz.png?url";
+import envPxUrl from "../assets/3d-card/environment/px.png?url";
+import envPyUrl from "../assets/3d-card/environment/py.png?url";
+import envPzUrl from "../assets/3d-card/environment/pz.png?url";
+import fontMaisonNeueBookUrl from "../assets/3d-card/model/MaisonNeue-Book.woff?url";
+import fontMarkProRegularUrl from "../assets/3d-card/model/MarkPro-Regular.ttf?url";
+import bandRoughnessUrl from "../assets/3d-card/model/band_roughness.jpg?url";
+import cardGltfUrl from "../assets/3d-card/model/card.gltf?url";
+import chipUrl from "../assets/3d-card/model/chip.jpg?url";
+import colorBlackUrl from "../assets/3d-card/model/color_black.jpg?url";
+import colorSilverUrl from "../assets/3d-card/model/color_silver.jpg?url";
+import shinyColorFragmentShader from "../assets/3d-card/shaders/shinyColorFragment.glsl?raw";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { createSvgImage, getMonochromeSvg } from "../utils/svg";
+/*
+This Module exports 2 components:
+- default export: A react-three-fiber scene which can be integrated in any react project
+(We use default export to be able to use React.lazy to load this component asynchronously without impacting bundle size)
+- Card component: which can be use for developers who already have a react-three-fiber scene or want to create there own scene
+
+Here are some details about choices made for this components:
+:one: Textures
+Textures aren't integrated in gltf export because it will force all developers to put texture files in their public folder.
+By using ?url import and `useTexture` hook, Vite will put textures in dist folder for all developers who use this component.
+
+:two: Logo integration
+There is an SVGLoader for threejs but it doesn't support all svg features.
+So to be sure to support all svg features, we transform the SVG into Image element to create a texture.
+And this texture is used as an alpha map on a plane.
+
+:three: Mastercard shiny text on back of card
+To reproduce the shiny effect on the back of the card, we inject a custom shader in rainbow_mastercard material.
+This custom shader chunk change the diffuse color depending on camera position.
+*/
+const ENV_MAP_INTENSITY = 3;
+const CARD_WIDTH = 8.56;
+const CARD_HEIGHT = 5.4;
+const FRONT_TEXT_POSITION = 0.04;
+const BACK_TEXT_POSITION = -FRONT_TEXT_POSITION;
+const LOGO_MARGIN_TOP = 0.3;
+const LOGO_MARGIN_RIGHT = 0.3;
+const LOGO_MAX_WIDTH = 5; // in cm
+const LOGO_MAX_HEIGHT = 1; // in cm
+const computeCardLogoSize = (logoSize) => {
+    const logoRatio = logoSize.width / logoSize.height;
+    const cardSpaceRatio = LOGO_MAX_WIDTH / LOGO_MAX_HEIGHT;
+    // if logo is wider than available space
+    // logo will have the same width than available space
+    if (logoRatio >= cardSpaceRatio) {
+        const width = LOGO_MAX_WIDTH;
+        const height = width / logoRatio;
+        return { width, height };
+    }
+    else {
+        // if logo is higher than available space
+        // logo will have the same height than available space
+        const height = LOGO_MAX_HEIGHT;
+        const width = height * logoRatio;
+        return { width, height };
+    }
+};
+// Use export default for React.lazy
+export default (props) => {
+    return (_jsxs(Canvas, { camera: { position: [0, 0, 12], fov: 50 }, children: [_jsx(OrbitControls, { enablePan: false, enableZoom: false }), _jsx(CardScene, { ...props })] }));
+};
+const CardScene = ({ autoRotationDuration, ...props }) => {
+    const card = useRef(null);
+    useFrame(({ clock }) => {
+        if (autoRotationDuration != null && card.current != null) {
+            card.current.rotation.y = (clock.getElapsedTime() / autoRotationDuration) * Math.PI * 2;
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { color: 0xffffff, intensity: 1 }), _jsx("pointLight", { intensity: 0.2, decay: 2, position: [-10, -10, -21] }), _jsx("pointLight", { intensity: 0.2, decay: 2, position: [10, 10, 21] }), _jsx(Environment, { files: [envPxUrl, envNxUrl, envPyUrl, envNyUrl, envPzUrl, envNzUrl] }), _jsx(Card, { ref: card, ...props })] }));
+};
+// Set color space to sRGB for textures
+const setTextureColorSpace = (texture) => {
+    if (!Array.isArray(texture)) {
+        texture.colorSpace = THREE.SRGBColorSpace;
+    }
+};
+export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, color, logo, logoScale, onSvgError, ...props }, ref) => {
+    const { nodes, materials } = useGLTF(cardGltfUrl);
+    const [logoData, setLogoData] = useState(null);
+    const silverTexture = useTexture(colorSilverUrl, setTextureColorSpace);
+    const blackTexture = useTexture(colorBlackUrl, setTextureColorSpace);
+    const chipTexture = useTexture(chipUrl, setTextureColorSpace);
+    const bandRoughnessTexture = useTexture(bandRoughnessUrl); // keep default color space because it's grayscale
+    // Set environment map intensity for all materials
+    useEffect(() => {
+        Object.values(materials).forEach(material => {
+            material.envMapIntensity = ENV_MAP_INTENSITY;
+        });
+    }, [materials]);
+    // Set rainbow mastercard text custom fragment shader
+    useEffect(() => {
+        materials.rainbow_mastercard.onBeforeCompile = shader => {
+            shader.fragmentShader = shader.fragmentShader.replace("#include <color_fragment>", shinyColorFragmentShader);
+        };
+    }, [materials.rainbow_mastercard]);
+    // Set band roughness and chip texture
+    useEffect(() => {
+        materials.black_band.roughness = 0.8;
+        materials.black_band.roughnessMap = bandRoughnessTexture;
+        materials.chip.map = chipTexture;
+    }, [materials.black_band, materials.chip, bandRoughnessTexture, chipTexture]);
+    // Set color texture
+    useEffect(() => {
+        match(color)
+            .with("Silver", () => {
+            materials.card.map = silverTexture;
+        })
+            .with("Black", () => {
+            materials.card.map = blackTexture;
+        })
+            .exhaustive();
+    }, [color, materials.card, silverTexture, blackTexture]);
+    // this avoid to have onSvgError as dependency of the effect below which should run only on logo change
+    const handleSvgError = useRef(onSvgError);
+    useEffect(() => {
+        handleSvgError.current = onSvgError;
+    }, [onSvgError]);
+    // Handle logo
+    useEffect(() => {
+        if (isNullish(logo)) {
+            setLogoData(null);
+            return;
+        }
+        // We transform the logo to white to be able to use it as alpha map
+        const whiteLogo = getMonochromeSvg(logo, "white");
+        // Convert to Image element to be able to use it as texture
+        const image = createSvgImage(whiteLogo);
+        if (image.isError()) {
+            handleSvgError.current?.(image.getError());
+            return;
+        }
+        // Compute logo size depending on constraints
+        const { width: logoWidth, height: logoHeight } = computeCardLogoSize(image.get());
+        const alphaMap = new THREE.Texture(image.get());
+        alphaMap.needsUpdate = true;
+        setLogoData({
+            size: [logoWidth, logoHeight],
+            alphaMap,
+        });
+    }, [logo]);
+    const mainTextMaterial = (_jsx("meshStandardMaterial", { color: match(color)
+            .with("Silver", () => 0x000000)
+            .with("Black", () => 0xeeeeee)
+            .exhaustive(), metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
+    const secondaryTextMaterial = (_jsx("meshStandardMaterial", { color: 0x666666, metalness: 0.1, roughness: 0.55, envMapIntensity: ENV_MAP_INTENSITY }));
+    return (_jsx("group", { ref: ref, ...props, dispose: null, children: _jsxs("mesh", { geometry: nodes.card.geometry, material: materials.card, children: [_jsxs("group", { position: [0, 0, FRONT_TEXT_POSITION], children: [_jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.2, anchorX: "left", anchorY: "bottom", position: [-3.4, -1.95, 0], children: [ownerName, mainTextMaterial] }), _jsxs(Text, { font: fontMarkProRegularUrl, fontSize: 0.03, anchorX: "left", anchorY: "bottom", position: [3.85, -2.15, 0], children: ["TM", mainTextMaterial] })] }), _jsxs("group", { position: [0, 0, BACK_TEXT_POSITION], children: [_jsxs(Text, { font: fontMarkProRegularUrl, anchorX: "left", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [4, 2.38, 0], children: ["support@swan.io", secondaryTextMaterial] }), _jsxs(Text, { font: fontMarkProRegularUrl, anchorX: "right", anchorY: "bottom", fontSize: 0.12, rotation: [0, Math.PI, 0], position: [-4, 2.38, 0], children: ["IDEMIA 9 1212121L 09/21", secondaryTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.24, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.68, 0], children: ["Identifier: 0000000000", mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, 0.15, 0], children: ["This card is issued by Swan, pursuant to license", secondaryTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.2, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -0.15, 0], children: ["by Mastercard international.", secondaryTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.48, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -1.85, 0], children: [cardNumber, mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [4, -2.3, 0], children: [expirationDate, mainTextMaterial] }), _jsxs(Text, { font: fontMaisonNeueBookUrl, fontSize: 0.29, anchorX: "left", anchorY: "bottom", rotation: [0, Math.PI, 0], position: [2.55, -2.3, 0], children: ["CVC ", cvv, mainTextMaterial] }), _jsxs(Text, { font: fontMarkProRegularUrl, anchorX: "center", anchorY: "bottom", fontSize: 0.36, rotation: [0, Math.PI, 0], position: [-2.35, -1.15, 0], children: ["debit", mainTextMaterial] })] }), _jsx("group", { 
+                    // move group to change scale center at top right corner
+                    position: [
+                        CARD_WIDTH / 2 - LOGO_MARGIN_RIGHT,
+                        CARD_HEIGHT / 2 - LOGO_MARGIN_TOP,
+                        FRONT_TEXT_POSITION,
+                    ], scale: logoScale, children: isNotNullish(logoData) && (_jsxs("mesh", { position: [-logoData.size[0] / 2, -logoData.size[1] / 2, 0], children: [_jsx("planeGeometry", { args: logoData.size }), _jsx("meshStandardMaterial", { color: match(color)
+                                    .with("Silver", () => 0x000000)
+                                    .with("Black", () => 0xffffff)
+                                    .exhaustive(), metalness: 0.1, roughness: 0.35, envMapIntensity: ENV_MAP_INTENSITY, transparent: true, alphaMap: logoData.alphaMap })] })) }), _jsx("mesh", { geometry: nodes.black_band.geometry, material: materials.black_band, position: [0, 1.774, BACK_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip.geometry, material: materials.chip, position: [-2.78, 0.439, FRONT_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip_pattern.geometry, material: materials.chip_pattern, position: [-2.778, 0.442, FRONT_TEXT_POSITION + 0.001], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.mc_center.geometry, material: materials.mastercard_orange, position: [3.052, -1.832, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_left.geometry, material: materials.mastercard_red, position: [2.676, -1.773, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_right.geometry, material: materials.mastercard_yellow, position: [3.47, -1.773, FRONT_TEXT_POSITION], rotation: [-Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.metal_circle.geometry, material: materials.rainbow, position: [-2.33, -1.849, BACK_TEXT_POSITION], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_circle001.geometry, material: materials.rainbow_rough, position: [-2.629, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0], scale: [0.35, 1, 0.35] }), _jsx("mesh", { geometry: nodes.metal_circle002.geometry, material: materials.rainbow_rough, position: [-2.33, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_mastercard.geometry, material: materials.rainbow_mastercard, position: [0.914, -1.298, BACK_TEXT_POSITION - 0.001], rotation: [Math.PI / 2, 0, Math.PI], scale: 0.09 })] }) }));
+});

package/src/components/DatePicker.d.ts

@@ -0,0 +1,90 @@
+import { Option } from "@swan-io/boxed";
+import { ValidatorResult } from "react-ux-form";
+import { Except } from "type-fest";
+export type MonthNames = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+export type WeekDayNames = readonly [string, string, string, string, string, string, string];
+declare const weekDayIndex: {
+    sunday: number;
+    monday: number;
+    tuesday: number;
+    wednesday: number;
+    thursday: number;
+    friday: number;
+    saturday: number;
+};
+export type DatePickerDate = {
+    day: number;
+    month: number;
+    year: number;
+};
+export type DatePickerRange = {
+    start: Option<DatePickerDate>;
+    end: Option<DatePickerDate>;
+};
+export type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY";
+export declare const validateDateRangeOrder: (value: {
+    start: string;
+    end: string;
+}, format: DateFormat) => boolean;
+export declare const isTodayOrFutureDate: (date: DatePickerDate) => boolean;
+export declare const isDateInRange: (minDate: Date, maxDate: Date) => (date: DatePickerDate) => boolean;
+export type DatePickerProps = {
+    label: string;
+    value?: string;
+    error?: string;
+    format: DateFormat;
+    firstWeekDay: keyof typeof weekDayIndex;
+    monthNames: MonthNames;
+    weekDayNames: WeekDayNames;
+    isSelectable?: (date: DatePickerDate) => boolean;
+    onChange: (date: string) => void;
+};
+export declare const DatePicker: ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+type DatePickerModalProps = Except<DatePickerProps, "error"> & {
+    visible: boolean;
+    cancelLabel: string;
+    confirmLabel: string;
+    validate?: (value: string) => ValidatorResult;
+    onDissmiss: () => void;
+};
+export declare const DatePickerModal: ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export type DateRangePickerProps = {
+    value: {
+        start: string;
+        end: string;
+    };
+    error?: string;
+    format: DateFormat;
+    startLabel: string;
+    endLabel: string;
+    firstWeekDay: keyof typeof weekDayIndex;
+    monthNames: MonthNames;
+    weekDayNames: WeekDayNames;
+    isSelectable?: (date: DatePickerDate) => boolean;
+    onChange: (date: {
+        start: string;
+        end: string;
+    }) => void;
+};
+export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+type DateRangePickerModalProps = DateRangePickerProps & {
+    visible: boolean;
+    cancelLabel: string;
+    confirmLabel: string;
+    onDissmiss: () => void;
+};
+export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }: DateRangePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};