@tap-payments/os-micro-frontend-shared 0.1.24-test.1 → 0.1.24-test.3

package/build/components/ListLayout/ListLayout.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ListLayoutStyled } from './styles';
+interface ListLayoutProps extends ComponentPropsWithoutRef<typeof ListLayoutStyled> {
+}
+declare function ListLayout({ children, ...props }: Readonly<ListLayoutProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListLayout {
+    var displayName: string;
+}
+declare const _default: import("react").MemoExoticComponent<typeof ListLayout>;
+export default _default;

package/build/components/ListLayout/ListLayout.js

@@ -0,0 +1,20 @@
+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 } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ListLayoutStyled } from './styles';
+function ListLayout(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListLayoutStyled, Object.assign({ component: 'article', "data-testid": 'ListLayout' }, props, { children: children })));
+}
+ListLayout.displayName = 'ListLayout';
+export default memo(ListLayout);

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

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

package/build/components/ListLayout/index.js

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

package/build/components/ListLayout/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ListLayoutStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ListLayout/styles.js

@@ -0,0 +1,8 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ListLayoutStyled = styled(Box)(() => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%'
+}));

package/build/components/StatusIcons/SourceIcons/SourceIcons.js

@@ -16,10 +16,10 @@ export function SourceIcons({ payment, card, isTextShown, firstIcon }) {
         const method = payment === null || payment === void 0 ? void 0 : payment.method;
         const scheme = payment === null || payment === void 0 ? void 0 : payment.scheme;
         if (((_a = getPaymentMethodKey(method)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = getPaymentMethodKey(scheme)) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
-            initialSources.push(...[getPaymentMethodKey(type), getPaymentMethodKey(method)]);
+            initialSources.push(...[getPaymentMethodKey(method), getPaymentMethodKey(type)]);
         }
         else {
-            initialSources.push(...[getPaymentMethodKey(type), getPaymentMethodKey(method), getPaymentMethodKey(scheme)]);
+            initialSources.push(...[getPaymentMethodKey(method), getPaymentMethodKey(type), getPaymentMethodKey(scheme)]);
         }
         return initialSources;
     }, [payment]);

package/build/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ToggleViews, ToggleViewsValues } from './types';
+declare const DEFAULT_TOGGLE_VIEWS: {
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: ToggleViews;
+}[];
+export interface ToggleViewProps {
+    onToggleClick: (view: ToggleViewsValues) => void;
+    currentView: ToggleViewsValues;
+    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
+        icon: React.ReactNode;
+        value: ToggleViewsValues;
+    }[];
+}
+declare const ToggleView: (props: ToggleViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToggleView;

package/build/components/ToggleView/ToggleView.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardViewButtonIcon, listViewButtonIcon } from '../../constants/index.js';
+import { ActiveOverlay, ViewButton } from './style';
+import { ToggleViews } from './types';
+import { useMemo } from 'react';
+import ToggleWrapper from './ToggleWrapper';
+const DEFAULT_TOGGLE_VIEWS = [
+    {
+        icon: _jsx("img", { src: cardViewButtonIcon, alt: "card" }),
+        value: ToggleViews.CARDS,
+    },
+    {
+        icon: _jsx("img", { src: listViewButtonIcon, alt: ToggleViews.LIST }),
+        value: ToggleViews.LIST,
+    },
+];
+const ToggleView = (props) => {
+    const { currentView, onToggleClick, getOverrideViews } = props;
+    const views = useMemo(() => {
+        if (getOverrideViews)
+            return getOverrideViews(DEFAULT_TOGGLE_VIEWS);
+        return DEFAULT_TOGGLE_VIEWS;
+    }, [getOverrideViews]);
+    const viewIndex = useMemo(() => views.findIndex((view) => view.value === currentView), [views, currentView]);
+    if (!onToggleClick)
+        return null;
+    return (_jsxs(ToggleWrapper, { children: [views.map((view) => (_jsx(ViewButton, Object.assign({ onClick: () => onToggleClick(view.value), sx: {
+                    height: '11.6px',
+                    width: '11.6px',
+                }, isActive: currentView === view.value }, { children: view.icon }), view.value))), _jsx(ActiveOverlay, { activeIndex: viewIndex })] }));
+};
+export default ToggleView;

package/build/components/ToggleView/ToggleWrapper.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { type BoxProps } from '@mui/material/Box';
+declare const ToggleWrapper: (props: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
+export default ToggleWrapper;

package/build/components/ToggleView/ToggleWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ToggleWrapperStyled } from './style';
+const ToggleWrapper = (props) => {
+    const viewTogglers = React.Children.count(props.children) - 1;
+    return _jsx(ToggleWrapperStyled, Object.assign({}, props, { sx: { width: viewTogglers * 30 + 2 } }));
+};
+export default ToggleWrapper;

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

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export default ToggleView;
+export * from './types';

package/build/components/ToggleView/index.js

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export default ToggleView;
+export * from './types';

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ToggleWrapperStyled: 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 ViewButton: 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> & {
+    isActive: boolean;
+}, {}, {}>;
+export declare const ActiveOverlay: 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> & {
+    activeIndex: number;
+}, {}, {}>;

package/build/components/ToggleView/style.js

@@ -0,0 +1,31 @@
+import { Box, styled } from '@mui/material';
+export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
+    height: '32px',
+    borderRadius: '4px',
+    backgroundColor: theme.palette.action.hover,
+    padding: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer'
+}));
+export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 2,
+    opacity: isActive ? 1 : 0.5
+}));
+export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
+    position: 'absolute',
+    top: 2,
+    left: activeIndex * 30 + 2,
+    transition: 'all 0.25s ease-in-out',
+    width: '28px',
+    height: '28px',
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '2px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)'
+}));

package/build/components/ToggleView/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToggleViews {
+    LIST = "LIST",
+    CARDS = "CARDS",
+    MAP = "MAP"
+}
+export type ToggleViewsValues = `${ToggleViews}` | (string & {});

package/build/components/ToggleView/types.js

@@ -0,0 +1,6 @@
+export var ToggleViews;
+(function (ToggleViews) {
+    ToggleViews["LIST"] = "LIST";
+    ToggleViews["CARDS"] = "CARDS";
+    ToggleViews["MAP"] = "MAP";
+})(ToggleViews || (ToggleViews = {}));

package/build/components/index.d.ts

@@ -97,3 +97,7 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';

package/build/components/index.js

@@ -97,3 +97,7 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.24-test.1",
-  "testVersion": 1,
+  "version": "0.1.24-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -122,6 +122,15 @@
     "vite": "6.0.5",
     "vite-tsconfig-paths": "^4.2.0"
   },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router": "^7.7.0",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/material": "^5",
+    "react-multi-date-picker": "4.1.2"
+  },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [
       "yarn run prettier:fix",