@tap-payments/os-micro-frontend-shared 0.1.64 → 0.1.65

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,10 @@
+import { type SxProps } from '@mui/material/styles';
+type ColorPickerProps = {
+    id: string;
+    value?: string;
+    onChange: (value: string) => void;
+    onReset?: () => void;
+    sx?: SxProps;
+};
+declare const ColorPicker: ({ id, value, onChange, onReset, sx }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

package/build/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { RgbaColorPicker } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+import Color from 'color';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Divider from '@mui/material/Divider';
+import Popper from '@mui/material/Popper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CancelButton, ConfirmButton, Footer, StyledCloseButtonWrapper, StyledColorWidgetWrapper } from './style';
+import { closeXIcon } from '../../constants/index.js';
+const hexa2Rgba = (value) => {
+    const colorInstance = Color(value).rgb();
+    const { r, g, b, alpha = 1 } = colorInstance.object();
+    return {
+        value: { r, g, b, alpha },
+        stringified: `rgba(${r},${g},${b},${alpha})`,
+    };
+};
+const rgba2Hexa = (value) => Color(value).hexa();
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const rootRef = useRef(null);
+    const [color, setColor] = useState(() => {
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        return Object.assign(Object.assign({}, rest), { a });
+    });
+    const handleOpen = useCallback(() => {
+        setAnchorEl(rootRef.current);
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        setColor(Object.assign(Object.assign({}, rest), { a }));
+    }, [value]);
+    const handleCancel = useCallback(() => {
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        setColor(Object.assign(Object.assign({}, rest), { a }));
+        setAnchorEl(null);
+    }, [value]);
+    const handleConfirm = useCallback(() => {
+        const { a: alpha } = color, rest = __rest(color, ["a"]);
+        onChange(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
+        setAnchorEl(null);
+    }, [onChange, color]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker" }, { children: [_jsxs(Stack, Object.assign({ sx: sx, direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), _jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) })), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
+};
+export default ColorPicker;

package/build/components/ColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+import ColorPicker from './ColorPicker';
+export default ColorPicker;

package/build/components/ColorPicker/index.js

@@ -0,0 +1,2 @@
+import ColorPicker from './ColorPicker';
+export default ColorPicker;

package/build/components/ColorPicker/style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const StyledCloseButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledColorWidgetWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ConfirmButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ColorPicker/style.js

@@ -0,0 +1,85 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const StyledCloseButtonWrapper = styled('button')({
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    width: 10,
+    height: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+});
+export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
+    boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.16)',
+    minWidth: 264,
+    backgroundColor: '#ffffff',
+    padding: '12px',
+    borderRadius: theme.spacing(1),
+    '& .react-colorful': {
+        width: '100%',
+        '&__saturation': {
+            minHeight: 152,
+            borderRadius: '4px',
+            marginBottom: theme.spacing(2),
+            border: 0,
+            '&-pointer': {
+                width: 13,
+                height: 13
+            }
+        },
+        '&__hue': {
+            marginBottom: theme.spacing(2),
+            borderRadius: '4px',
+            height: '16px',
+            '&-pointer': {
+                width: 10,
+                height: 10
+            }
+        },
+        '&__alpha': {
+            border: 0,
+            borderRadius: '4px',
+            height: '16px',
+            '&-pointer': {
+                width: 10,
+                height: 10
+            }
+        }
+    }
+}));
+export const Footer = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end'
+}));
+export const ConfirmButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.info.dark}`,
+    backgroundColor: theme.palette.info.dark,
+    fontWeight: 700,
+    fontSize: '11px',
+    color: theme.palette.common.white,
+    '&:hover': {
+        backgroundColor: theme.palette.info.dark
+    }
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.common.white,
+    fontWeight: 500,
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    '&:hover': {
+        background: 'transparent'
+    }
+}));

package/build/components/FileUploader/FileUploader.d.ts

@@ -1,3 +1,3 @@
 import type { FileUploaderComponentProps } from './type';
-declare const FileUploader: ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, }: FileUploaderComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileUploader: ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, label, hintText, sx, }: FileUploaderComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default FileUploader;

package/build/components/FileUploader/FileUploader.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from '@mui/material/Box';
 import { redVerifyIcon, uploadBlueIcon } from '../../constants/index.js';
 import { Content, ErrorMessage, StyledFileUploader, IconWrapper, Maximum, TextWrapper, Upload } from './style';
-const FileUploader = ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, }) => {
-    return (_jsxs(StyledFileUploader, Object.assign({}, getRootProps(), { onClick: open }, { children: [_jsx("input", Object.assign({}, getInputProps(), { onChange: (e) => {
+const FileUploader = ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, label = 'Click to upload', hintText, sx, }) => {
+    return (_jsxs(StyledFileUploader, Object.assign({}, getRootProps(), { sx: sx, onClick: open }, { children: [_jsx("input", Object.assign({ "data-slot": "input" }, getInputProps(), { onChange: (e) => {
                     const processedFiles = processFiles(Array.from(e.target.files || []));
                     if (processedFiles.length > 0 || !preventDuplicates) {
                         onChangeFiles(processedFiles);
                     }
-                }, disabled: disabled })), _jsxs(Content, { children: [_jsx(IconWrapper, { children: _jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 16, height: 16 }) }), errorMessage ? (_jsxs(TextWrapper, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(Upload, { children: "Click to upload again" })] })) : (_jsxs(TextWrapper, { children: [_jsx(Upload, { children: "Click to upload" }), _jsxs(Maximum, { children: ["PDF, JPG or PNG files up to ", maxFileSize] })] }))] })] })));
+                }, disabled: disabled })), _jsxs(Content, Object.assign({ "data-slot": "content" }, { children: [_jsx(IconWrapper, Object.assign({ "data-slot": "icon-wrapper" }, { children: _jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 16, height: 16 }) })), errorMessage ? (_jsxs(TextWrapper, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(Upload, { children: "Click to upload again" })] })) : (_jsxs(TextWrapper, { children: [_jsx(Upload, { children: label }), _jsx(Maximum, { children: hintText || `PDF, JPG or PNG files up to ${maxFileSize}` })] }))] }))] })));
 };
 export default FileUploader;

package/build/components/FileUploader/type.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import type { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone';
 import type { FileType } from '../../types/index.js';
+import { SxProps, Theme } from '@mui/material/styles';
 export interface FileUploaderComponentProps {
     getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;
     getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
@@ -10,4 +12,7 @@ export interface FileUploaderComponentProps {
     errorMessage?: string;
     maxFileSize: string;
     preventDuplicates?: boolean;
+    label?: React.ReactNode;
+    hintText?: React.ReactNode;
+    sx?: SxProps<Theme>;
 }

package/build/components/index.d.ts

@@ -102,3 +102,4 @@ export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
+export { default as ColorPicker } from './ColorPicker';

package/build/components/index.js

@@ -102,3 +102,4 @@ export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
+export { default as ColorPicker } from './ColorPicker';

package/build/constants/assets.d.ts

@@ -525,3 +525,12 @@ export declare const exclamationOutlinedCircle: string;
 export declare const outlinedCircle: string;
 export declare const greenCheck2ACE00: string;
 export declare const blueCopyIcon: string;
+export declare const blackLinkIcon: string;
+export declare const blackSettingsIcon: string;
+export declare const blackWallet: string;
+export declare const blueGradientBrushIcon: string;
+export declare const gadientLink: string;
+export declare const gradientSettings: string;
+export declare const gradientWallet: string;
+export declare const manyCurrencyCoin: string;
+export declare const manyCurrencyCoinGradient: string;

package/build/constants/assets.js

@@ -529,3 +529,12 @@ export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.
 export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;
 export const greenCheck2ACE00 = `${lightUrl}/greenCheck2ACE00.svg`;
 export const blueCopyIcon = `${lightUrl}/blueCopyIcon.svg`;
+export const blackLinkIcon = `${lightUrl}/blackLinkIcon.svg`;
+export const blackSettingsIcon = `${lightUrl}/blackSettingsIcon.svg`;
+export const blackWallet = `${lightUrl}/blackWallet.svg`;
+export const blueGradientBrushIcon = `${lightUrl}/blueGradientBrushIcon.svg`;
+export const gadientLink = `${lightUrl}/gadientLink.svg`;
+export const gradientSettings = `${lightUrl}/gradientSettings.svg`;
+export const gradientWallet = `${lightUrl}/gradientWallet.svg`;
+export const manyCurrencyCoin = `${lightUrl}/manyCurrencyCoin.svg`;
+export const manyCurrencyCoinGradient = `${lightUrl}/manyCurrencyCoinGradient.svg`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
@@ -79,12 +79,14 @@
     "@mui/material": "^5.12.3",
     "@uiw/react-json-view": "^2.0.0-alpha.16",
     "axios": "^1.4.0",
+    "color": "^5.0.0",
     "dayjs": "^1.11.8",
     "framer-motion": "10.11.0",
     "i18next": "^22.4.15",
     "memoize-one": "^6.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
     "react-currency-input-field": "^3.6.11",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",