@tap-payments/os-micro-frontend-shared 0.0.224 → 0.0.226

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 (8) hide show
  1. package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js +2 -3
  2. package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +18 -0
  3. package/build/components/TableCells/CustomCells/SalesChannelCell/style.js +19 -1
  4. package/build/components/TableCells/CustomCells/SegmentsCell/style.js +2 -2
  5. package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.d.ts +1 -1
  6. package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js +2 -2
  7. package/build/types/table.d.ts +3 -1
  8. package/package.json +134 -134
package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js CHANGED
@@ -11,10 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import Tooltip from '../../../Tooltip';
14
- import { paymentSourceAnimation } from '../../../CountBadge/style';
15
14
  import { ImageWrapper } from '../../../index.js';
16
15
  import { TableCell } from '../../../TableCells';
17
- import { ChannelTextLabel, ChannelTextWrapper, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
16
+ import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
18
17
  function SalesChannelCell(_a) {
19
18
  var _b;
20
19
  var { channels, isTextShown } = _a, props = __rest(_a, ["channels", "isTextShown"]);
@@ -22,7 +21,7 @@ function SalesChannelCell(_a) {
22
21
  var _a;
23
22
  const sourceTooltip = channel.address;
24
23
  const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
25
- return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: paymentSourceAnimation(index, isTextShown ? 74 : 0), sx: {
24
+ return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: {
26
25
  width: isTextShown ? '70px' : '36px',
27
26
  } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));
28
27
  });
package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts CHANGED
@@ -267,3 +267,21 @@ export declare const SalesChannelsContainer: import("@emotion/styled").StyledCom
267
267
  }, {}, {}>;
268
268
  export declare const ChannelTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
269
269
  export declare const ChannelTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
270
+ export declare const salesChannelAnimation: (index: number, xDelta?: number) => {
271
+ start: {
272
+ x: number;
273
+ transition: {
274
+ duration: number;
275
+ type: string;
276
+ ease: string;
277
+ };
278
+ };
279
+ animate: {
280
+ x: number;
281
+ transition: {
282
+ duration: number;
283
+ type: string;
284
+ ease: string;
285
+ };
286
+ };
287
+ };
package/build/components/TableCells/CustomCells/SalesChannelCell/style.js CHANGED
@@ -17,7 +17,7 @@ export const SalesChannelsContainer = styled(motion.span)(({ theme, sourcesCount
17
17
  position: 'absolute',
18
18
  minWidth: `${sourcesCount * 6 + 36}px `,
19
19
  minHeight: '24px',
20
- cursor: 'pointer',
20
+ cursor: 'default',
21
21
  backgroundColor: theme.palette.background.paper,
22
22
  borderRadius: '16px',
23
23
  }));
@@ -34,3 +34,21 @@ export const ChannelTextWrapper = styled('div')(() => ({
34
34
  justifyContent: 'center',
35
35
  paddingInline: '4px',
36
36
  }));
37
+ export const salesChannelAnimation = (index, xDelta) => ({
38
+ start: {
39
+ x: index * 6,
40
+ transition: {
41
+ duration: 0.3,
42
+ type: 'tween',
43
+ ease: 'easeIn',
44
+ },
45
+ },
46
+ animate: {
47
+ x: xDelta ? index * xDelta : index * 39,
48
+ transition: {
49
+ duration: 0.3,
50
+ type: 'tween',
51
+ ease: 'easeOut',
52
+ },
53
+ },
54
+ });
package/build/components/TableCells/CustomCells/SegmentsCell/style.js CHANGED
@@ -17,7 +17,7 @@ export const ReferenceSourcesContainer = styled(motion.span)(({ theme, sourcesCo
17
17
  position: 'absolute',
18
18
  minWidth: `${sourcesCount * 6 + 36}px `,
19
19
  minHeight: '24px',
20
- cursor: 'pointer',
20
+ cursor: 'default',
21
21
  backgroundColor: theme.palette.background.paper,
22
22
  borderRadius: '16px',
23
23
  }));
@@ -44,7 +44,7 @@ export const referenceSourceAnimation = (index, shadow, xDelta) => ({
44
44
  },
45
45
  },
46
46
  animate: {
47
- x: xDelta ? index * xDelta : index * 39,
47
+ x: xDelta ? index * xDelta : index * 28,
48
48
  transition: {
49
49
  duration: 0.3,
50
50
  type: 'tween',
package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.d.ts CHANGED
@@ -3,5 +3,5 @@ interface InputsI {
3
3
  onCloseDropdown: () => void;
4
4
  filter: IColumnFilter & IColumnFilterInputs;
5
5
  }
6
- declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick } }: InputsI): import("react/jsx-runtime").JSX.Element;
6
+ declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }: InputsI): import("react/jsx-runtime").JSX.Element;
7
7
  export default Inputs;
package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js CHANGED
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
7
7
  import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
8
8
  import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
9
9
  import { CancelButton, Footer, OkayButton } from '../style';
10
- function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick } }) {
10
+ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }) {
11
11
  const [values, setValues] = useState({});
12
12
  useEffect(() => {
13
13
  setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
@@ -39,7 +39,7 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
39
39
  const isAnyInputWithValue = Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== filterGroup || !filterGroup); });
40
40
  return isOnlyOneFilter && !inputWithValue && isAnyInputWithValue;
41
41
  }, [options, values, isOnlyOneFilter]);
42
- return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => (_jsx(Fragment, { children: render ? (render()) : (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
42
+ return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main", sx: wrapperSx }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => (_jsx(Fragment, { children: render ? (render()) : (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
43
43
  setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
44
44
  }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
45
45
  onClickResetInput(apiKey);
package/build/types/table.d.ts CHANGED
@@ -5,6 +5,7 @@ import { TableRowProps } from '@mui/material/TableRow';
5
5
  import { DragControls } from 'framer-motion';
6
6
  import { Country } from './appConfig';
7
7
  import { SortingOrder } from './sort';
8
+ import { SxProps } from '@mui/material';
8
9
  export interface TableFilters<T> {
9
10
  order: string;
10
11
  dateRange: [Date, Date];
@@ -127,7 +128,7 @@ export interface IVirtualTable<R = any> {
127
128
  dragControls?: DragControls;
128
129
  isSheetView?: boolean;
129
130
  }
130
- export type ColumnFilterValues = Record<string, string | string[] | {
131
+ export type ColumnFilterValues = Record<string, string | string[] | Record<string, boolean> | {
131
132
  phone: string;
132
133
  country: Country | undefined;
133
134
  }>;
@@ -137,4 +138,5 @@ export type IColumnFilter = ({
137
138
  onColumnFilterClearClick?: () => void;
138
139
  data?: ColumnFilterValues;
139
140
  isOnlyOneFilter?: boolean;
141
+ wrapperSx?: SxProps;
140
142
  } & (IColumnFilterList | IColumnFilterInputs | IColumnFilterCustom));
package/package.json CHANGED
@@ -1,134 +1,134 @@
1
- {
2
- "name": "@tap-payments/os-micro-frontend-shared",
3
- "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.224",
5
- "testVersion": 9,
6
- "type": "module",
7
- "main": "build/index.js",
8
- "module": "build/index.js",
9
- "types": "build/index.d.ts",
10
- "exports": {
11
- ".": {
12
- "types": "./build/index.d.ts",
13
- "import": "./build/index.js",
14
- "require": "./build/index.js"
15
- },
16
- "./constants": {
17
- "types": "./build/constants/index.d.ts",
18
- "import": "./build/constants/index.js",
19
- "require": "./build/constants/index.js"
20
- },
21
- "./components": {
22
- "types": "./build/components/index.d.ts",
23
- "import": "./build/components/index.js",
24
- "require": "./build/components/index.js"
25
- },
26
- "./components/*": {
27
- "types": "./build/components/*/index.d.ts",
28
- "import": "./build/components/*/index.js",
29
- "require": "./build/components/*/index.js"
30
- },
31
- "./hooks": {
32
- "types": "./build/hooks/index.d.ts",
33
- "import": "./build/hooks/index.js",
34
- "require": "./build/hooks/index.js"
35
- },
36
- "./utils": {
37
- "types": "./build/utils/index.d.ts",
38
- "import": "./build/utils/index.js",
39
- "require": "./build/utils/index.js"
40
- },
41
- "./theme": {
42
- "types": "./build/theme/index.d.ts",
43
- "import": "./build/theme/index.js",
44
- "require": "./build/theme/index.js"
45
- },
46
- "./types": {
47
- "types": "./build/types/index.d.ts",
48
- "import": "./build/types/index.js",
49
- "require": "./build/types/index.js"
50
- }
51
- },
52
- "license": "MIT",
53
- "author": {
54
- "name": "Ahmed Sharkawy",
55
- "email": "a.elsharkawy@tap.company"
56
- },
57
- "files": [
58
- "build",
59
- "readme.md"
60
- ],
61
- "scripts": {
62
- "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
63
- "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
64
- "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
65
- "dev": "vite",
66
- "build": "tsc -b && vite build ",
67
- "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
68
- "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
69
- "lint": "eslint . --color",
70
- "lint:fix": "eslint src --fix --color",
71
- "preview": "vite preview",
72
- "prepare": "husky"
73
- },
74
- "dependencies": {
75
- "@emotion/react": "^11.11.0",
76
- "@emotion/styled": "^11.11.0",
77
- "@hookform/resolvers": "^3.3.1",
78
- "@mui/material": "^5.12.3",
79
- "@uiw/react-json-view": "^2.0.0-alpha.16",
80
- "axios": "^1.4.0",
81
- "dayjs": "^1.11.8",
82
- "framer-motion": "10.11.0",
83
- "i18next": "^22.4.15",
84
- "memoize-one": "^6.0.0",
85
- "re-resizable": "^6.9.9",
86
- "react": "^18.2.0",
87
- "react-currency-input-field": "^3.6.11",
88
- "react-dom": "^18.2.0",
89
- "react-draggable": "^4.4.6",
90
- "react-dropzone": "^14.2.3",
91
- "react-hook-form": "^7.45.4",
92
- "react-hot-toast": "^2.4.1",
93
- "react-i18next": "^12.2.2",
94
- "react-multi-date-picker": "^4.1.2",
95
- "react-router-dom": "^7.7.0",
96
- "react-virtualized-auto-sizer": "^1.0.20",
97
- "react-window": "^1.8.9",
98
- "react-window-infinite-loader": "^1.0.9",
99
- "react18-input-otp": "^1.1.4",
100
- "recharts": "^2.15.1"
101
- },
102
- "devDependencies": {
103
- "@eslint/js": "^9.17.0",
104
- "@testing-library/jest-dom": "^5.16.5",
105
- "@types/lodash": "^4.17.15",
106
- "@types/react": "^18.2.6",
107
- "@types/react-dom": "^18.3.5",
108
- "@types/react-virtualized-auto-sizer": "^1.0.8",
109
- "@types/react-window": "^1.8.5",
110
- "@types/react-window-infinite-loader": "^1.0.6",
111
- "@vitejs/plugin-react": "^4.3.4",
112
- "eslint": "^9.17.0",
113
- "eslint-plugin-react-hooks": "^5.0.0",
114
- "eslint-plugin-react-refresh": "^0.4.16",
115
- "globals": "^15.14.0",
116
- "husky": "^8.0.3",
117
- "lint-staged": "^13.2.2",
118
- "prettier": "^2.8.8",
119
- "tsc-alias": "^1.8.16",
120
- "typescript": "5.0.2",
121
- "typescript-eslint": "^8.18.2",
122
- "vite": "6.0.5",
123
- "vite-tsconfig-paths": "^4.2.0"
124
- },
125
- "lint-staged": {
126
- "src/**/*.{ts,tsx,json,js,jsx}": [
127
- "yarn run prettier:fix",
128
- "yarn run lint"
129
- ]
130
- },
131
- "publishConfig": {
132
- "registry": "https://registry.npmjs.org/"
133
- }
134
- }
1
+ {
2
+ "name": "@tap-payments/os-micro-frontend-shared",
3
+ "description": "Shared components and utilities for Tap Payments micro frontends",
4
+ "version": "0.0.226",
5
+ "testVersion": 15,
6
+ "type": "module",
7
+ "main": "build/index.js",
8
+ "module": "build/index.js",
9
+ "types": "build/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./build/index.d.ts",
13
+ "import": "./build/index.js",
14
+ "require": "./build/index.js"
15
+ },
16
+ "./constants": {
17
+ "types": "./build/constants/index.d.ts",
18
+ "import": "./build/constants/index.js",
19
+ "require": "./build/constants/index.js"
20
+ },
21
+ "./components": {
22
+ "types": "./build/components/index.d.ts",
23
+ "import": "./build/components/index.js",
24
+ "require": "./build/components/index.js"
25
+ },
26
+ "./components/*": {
27
+ "types": "./build/components/*/index.d.ts",
28
+ "import": "./build/components/*/index.js",
29
+ "require": "./build/components/*/index.js"
30
+ },
31
+ "./hooks": {
32
+ "types": "./build/hooks/index.d.ts",
33
+ "import": "./build/hooks/index.js",
34
+ "require": "./build/hooks/index.js"
35
+ },
36
+ "./utils": {
37
+ "types": "./build/utils/index.d.ts",
38
+ "import": "./build/utils/index.js",
39
+ "require": "./build/utils/index.js"
40
+ },
41
+ "./theme": {
42
+ "types": "./build/theme/index.d.ts",
43
+ "import": "./build/theme/index.js",
44
+ "require": "./build/theme/index.js"
45
+ },
46
+ "./types": {
47
+ "types": "./build/types/index.d.ts",
48
+ "import": "./build/types/index.js",
49
+ "require": "./build/types/index.js"
50
+ }
51
+ },
52
+ "license": "MIT",
53
+ "author": {
54
+ "name": "Ahmed Sharkawy",
55
+ "email": "a.elsharkawy@tap.company"
56
+ },
57
+ "files": [
58
+ "build",
59
+ "readme.md"
60
+ ],
61
+ "scripts": {
62
+ "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
63
+ "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
64
+ "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
65
+ "dev": "vite",
66
+ "build": "tsc -b && vite build ",
67
+ "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
68
+ "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
69
+ "lint": "eslint . --color",
70
+ "lint:fix": "eslint src --fix --color",
71
+ "preview": "vite preview",
72
+ "prepare": "husky"
73
+ },
74
+ "dependencies": {
75
+ "@emotion/react": "^11.11.0",
76
+ "@emotion/styled": "^11.11.0",
77
+ "@hookform/resolvers": "^3.3.1",
78
+ "@mui/material": "^5.12.3",
79
+ "@uiw/react-json-view": "^2.0.0-alpha.16",
80
+ "axios": "^1.4.0",
81
+ "dayjs": "^1.11.8",
82
+ "framer-motion": "10.11.0",
83
+ "i18next": "^22.4.15",
84
+ "memoize-one": "^6.0.0",
85
+ "re-resizable": "^6.9.9",
86
+ "react": "^18.2.0",
87
+ "react-currency-input-field": "^3.6.11",
88
+ "react-dom": "^18.2.0",
89
+ "react-draggable": "^4.4.6",
90
+ "react-dropzone": "^14.2.3",
91
+ "react-hook-form": "^7.45.4",
92
+ "react-hot-toast": "^2.4.1",
93
+ "react-i18next": "^12.2.2",
94
+ "react-multi-date-picker": "^4.1.2",
95
+ "react-router-dom": "^7.7.0",
96
+ "react-virtualized-auto-sizer": "^1.0.20",
97
+ "react-window": "^1.8.9",
98
+ "react-window-infinite-loader": "^1.0.9",
99
+ "react18-input-otp": "^1.1.4",
100
+ "recharts": "^2.15.1"
101
+ },
102
+ "devDependencies": {
103
+ "@eslint/js": "^9.17.0",
104
+ "@testing-library/jest-dom": "^5.16.5",
105
+ "@types/lodash": "^4.17.15",
106
+ "@types/react": "^18.2.6",
107
+ "@types/react-dom": "^18.3.5",
108
+ "@types/react-virtualized-auto-sizer": "^1.0.8",
109
+ "@types/react-window": "^1.8.5",
110
+ "@types/react-window-infinite-loader": "^1.0.6",
111
+ "@vitejs/plugin-react": "^4.3.4",
112
+ "eslint": "^9.17.0",
113
+ "eslint-plugin-react-hooks": "^5.0.0",
114
+ "eslint-plugin-react-refresh": "^0.4.16",
115
+ "globals": "^15.14.0",
116
+ "husky": "^8.0.3",
117
+ "lint-staged": "^13.2.2",
118
+ "prettier": "^2.8.8",
119
+ "tsc-alias": "^1.8.16",
120
+ "typescript": "5.0.2",
121
+ "typescript-eslint": "^8.18.2",
122
+ "vite": "6.0.5",
123
+ "vite-tsconfig-paths": "^4.2.0"
124
+ },
125
+ "lint-staged": {
126
+ "src/**/*.{ts,tsx,json,js,jsx}": [
127
+ "yarn run prettier:fix",
128
+ "yarn run lint"
129
+ ]
130
+ },
131
+ "publishConfig": {
132
+ "registry": "https://registry.npmjs.org/"
133
+ }
134
+ }