@modul/mbui 0.0.20-beta-pv-52992-d5155aa6 → 0.0.20-beta-pv-53139-48074e41
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.
- package/dist/Alert/Alert.js +1 -1
- package/dist/Alert/Alert.js.map +1 -1
- package/dist/Badge/Badge.d.ts +10 -0
- package/dist/Badge/Badge.js +52 -0
- package/dist/Badge/Badge.js.map +1 -0
- package/dist/Badge/index.d.ts +1 -0
- package/dist/Badge/index.js +7 -0
- package/dist/Badge/index.js.map +1 -0
- package/dist/Button/Button.js +1 -1
- package/dist/FavoritePyments/FavoritePaymentsList.js +1 -1
- package/dist/FavoritePyments/FavoritePaymentsList.js.map +1 -1
- package/dist/Input-OTP/Input.js +2 -3
- package/dist/Input-OTP/Input.js.map +1 -1
- package/dist/Page/Page.js +1 -1
- package/dist/Page/Page.js.map +1 -1
- package/dist/Select/SelectAccountCard.js +33 -5
- package/dist/Select/SelectAccountCard.js.map +1 -1
- package/dist/Select/SelectAsync.js +73 -12
- package/dist/Select/SelectAsync.js.map +1 -1
- package/dist/Select/SelectBase.js +73 -13
- package/dist/Select/SelectBase.js.map +1 -1
- package/dist/Select/index.d.ts +0 -1
- package/dist/Select/index.js +1 -3
- package/dist/Select/index.js.map +1 -1
- package/dist/Toaster/Toaster.d.ts +13 -0
- package/dist/Toaster/Toaster.js +60 -0
- package/dist/Toaster/Toaster.js.map +1 -0
- package/dist/Toaster/index.d.ts +1 -0
- package/dist/Toaster/index.js +7 -0
- package/dist/Toaster/index.js.map +1 -0
- package/dist/index.d.ts +8 -5
- package/dist/index.js +11 -5
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
- package/src/@/config/index.ts +5 -0
- package/src/Alert/Alert.tsx +1 -1
- package/src/Badge/Badge.tsx +58 -0
- package/src/Badge/index.ts +1 -0
- package/src/Button/Button.tsx +1 -1
- package/src/FavoritePyments/FavoritePaymentsList.tsx +1 -1
- package/src/Input-OTP/Input.tsx +2 -2
- package/src/Page/Page.tsx +1 -1
- package/src/Select/SelectAccountCard.tsx +51 -1
- package/src/Select/SelectAsync.tsx +162 -1
- package/src/Select/SelectBase.tsx +168 -19
- package/src/Select/index.ts +0 -1
- package/src/Toaster/Toaster.tsx +71 -0
- package/src/Toaster/index.ts +1 -0
- package/src/assets/css/global.css +9 -1
- package/src/assets/images/logo/sbp-logo.svg +1 -0
- package/src/index.ts +16 -11
- package/src/pages/payments/SmsSign/sms-sign.tsx +151 -0
- package/dist/Select/SelectAccount.d.ts +0 -8
- package/dist/Select/SelectAccount.js +0 -50
- package/dist/Select/SelectAccount.js.map +0 -1
- package/dist/Select/components/components.d.ts +0 -15
- package/dist/Select/components/components.js +0 -80
- package/dist/Select/components/components.js.map +0 -1
- package/dist/Select/components/index.d.ts +0 -1
- package/dist/Select/components/index.js +0 -17
- package/dist/Select/components/index.js.map +0 -1
- package/src/Select/SelectAccount.tsx +0 -101
- package/src/Select/components/components.tsx +0 -186
- package/src/Select/components/index.tsx +0 -15
|
@@ -1,22 +1,169 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
|
|
3
|
+
import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
|
|
4
|
+
|
|
3
5
|
import Select, {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
components,
|
|
7
|
+
ControlProps,
|
|
8
|
+
OptionProps,
|
|
9
|
+
DropdownIndicatorProps,
|
|
10
|
+
StylesConfig,
|
|
11
|
+
SingleValueProps,
|
|
12
|
+
MenuProps,
|
|
13
|
+
PlaceholderProps,
|
|
14
|
+
ValueContainerProps,
|
|
15
|
+
InputProps,
|
|
16
|
+
LoadingIndicatorProps,
|
|
17
|
+
IndicatorsContainerProps, GroupBase, Props,
|
|
6
18
|
} from 'react-select'
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
|
|
20
|
+
import { cn } from '../@/lib/utils'
|
|
21
|
+
|
|
22
|
+
const selectTriggerClasses: string = `
|
|
23
|
+
flex
|
|
24
|
+
items-center
|
|
25
|
+
py-[12px]
|
|
26
|
+
px-[16px]
|
|
27
|
+
h-[44px]
|
|
28
|
+
text-left
|
|
29
|
+
border-[1px]
|
|
30
|
+
border-input
|
|
31
|
+
rounded-sm
|
|
32
|
+
cursor-pointer
|
|
33
|
+
`
|
|
34
|
+
|
|
35
|
+
const colourStyles: StylesConfig = {
|
|
36
|
+
control: () => ({}),
|
|
37
|
+
option: () => ({}),
|
|
38
|
+
input: () => ({}),
|
|
39
|
+
dropdownIndicator: () => ({}),
|
|
40
|
+
indicatorsContainer: () => ({}),
|
|
41
|
+
menu: () => ({}),
|
|
42
|
+
menuList: () => ({}),
|
|
43
|
+
singleValue: () => ({}),
|
|
44
|
+
valueContainer: () => ({}),
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const Input = ({...props }: InputProps) => {
|
|
48
|
+
return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const Control = ({ children, ...props }: ControlProps) => {
|
|
52
|
+
const { isFocused } = props
|
|
53
|
+
return (
|
|
54
|
+
<components.Control
|
|
55
|
+
className={cn(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused })}
|
|
56
|
+
{...props}
|
|
57
|
+
>
|
|
58
|
+
{children}
|
|
59
|
+
</components.Control>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const optionClasses =
|
|
64
|
+
'flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
|
|
65
|
+
|
|
66
|
+
const Option = ({ children, ...props }: OptionProps) => {
|
|
67
|
+
const {
|
|
68
|
+
isSelected,
|
|
69
|
+
isFocused,
|
|
70
|
+
isDisabled,
|
|
71
|
+
} = props
|
|
72
|
+
return (
|
|
73
|
+
<components.Option
|
|
74
|
+
className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
|
|
75
|
+
{...props}
|
|
76
|
+
>
|
|
77
|
+
<span className="flex basis-0 grow">{children}</span>
|
|
78
|
+
|
|
79
|
+
<span className="ml-[16px] shrink-0 size-[24px]">
|
|
80
|
+
{isSelected && (
|
|
81
|
+
<CheckSmall
|
|
82
|
+
width="24"
|
|
83
|
+
height="24"
|
|
84
|
+
className="text-primary"
|
|
85
|
+
/>
|
|
86
|
+
)}
|
|
87
|
+
</span>
|
|
88
|
+
</components.Option>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
|
|
93
|
+
return (
|
|
94
|
+
<components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
|
|
95
|
+
{children}
|
|
96
|
+
</components.IndicatorsContainer>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
|
|
101
|
+
return (
|
|
102
|
+
<components.LoadingIndicator
|
|
103
|
+
className='text-light shrink-0'
|
|
104
|
+
{...props}
|
|
105
|
+
/>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
|
|
110
|
+
return (
|
|
111
|
+
<components.DropdownIndicator
|
|
112
|
+
className="shrink-0"
|
|
113
|
+
{...props}
|
|
114
|
+
>
|
|
115
|
+
<DropdownSmallOld
|
|
116
|
+
className="text-light"
|
|
117
|
+
width="12"
|
|
118
|
+
height="12"
|
|
119
|
+
/>
|
|
120
|
+
</components.DropdownIndicator>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
|
|
125
|
+
return (
|
|
126
|
+
<components.ValueContainer
|
|
127
|
+
className="flex-1 grid"
|
|
128
|
+
{...props}
|
|
129
|
+
>
|
|
130
|
+
{children}
|
|
131
|
+
</components.ValueContainer>
|
|
132
|
+
)
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
const SingleValue = ({ children, ...props }: SingleValueProps) => {
|
|
136
|
+
return (
|
|
137
|
+
<components.SingleValue
|
|
138
|
+
className="col-start-1 col-end-3 row-start-1 row-end-2"
|
|
139
|
+
{...props}
|
|
140
|
+
>
|
|
141
|
+
{children}
|
|
142
|
+
</components.SingleValue>
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const Menu = ({ children, ...props }: MenuProps) => {
|
|
147
|
+
return (
|
|
148
|
+
<components.Menu
|
|
149
|
+
className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
|
|
150
|
+
{...props}
|
|
151
|
+
>
|
|
152
|
+
{children}
|
|
153
|
+
</components.Menu>
|
|
154
|
+
)
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
const Placeholder = ({ children, ...props }: PlaceholderProps) => {
|
|
158
|
+
return (
|
|
159
|
+
<components.Placeholder
|
|
160
|
+
className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
|
|
161
|
+
{...props}
|
|
162
|
+
>
|
|
163
|
+
{children}
|
|
164
|
+
</components.Placeholder>
|
|
165
|
+
)
|
|
166
|
+
}
|
|
20
167
|
|
|
21
168
|
type SelectBaseProps<
|
|
22
169
|
Option,
|
|
@@ -24,9 +171,11 @@ type SelectBaseProps<
|
|
|
24
171
|
Group extends GroupBase<Option> = GroupBase<Option>
|
|
25
172
|
> = Props<Option, IsMulti, Group>
|
|
26
173
|
|
|
27
|
-
function SelectBase<
|
|
28
|
-
|
|
29
|
-
|
|
174
|
+
function SelectBase<
|
|
175
|
+
Option,
|
|
176
|
+
IsMulti extends boolean = false,
|
|
177
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
178
|
+
>(props: SelectBaseProps<Option, IsMulti, Group>) {
|
|
30
179
|
return (
|
|
31
180
|
<Select
|
|
32
181
|
components={{
|
|
@@ -40,7 +189,7 @@ function SelectBase<Option, IsMulti extends boolean = false, Group extends Group
|
|
|
40
189
|
Placeholder,
|
|
41
190
|
Input,
|
|
42
191
|
LoadingIndicator,
|
|
43
|
-
IndicatorsContainer
|
|
192
|
+
IndicatorsContainer
|
|
44
193
|
}}
|
|
45
194
|
styles={colourStyles}
|
|
46
195
|
unstyled={true}
|
package/src/Select/index.ts
CHANGED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react'
|
|
2
|
+
import { InfoSolid, CheckCircleSolid } from '../Icon'
|
|
3
|
+
import { Toaster as ToastContainer, toast as toastItem, ToasterProps, ExternalToast } from 'sonner'
|
|
4
|
+
|
|
5
|
+
const Toaster = ({ ...props }: ToasterProps) => {
|
|
6
|
+
return (
|
|
7
|
+
<ToastContainer
|
|
8
|
+
visibleToasts={1}
|
|
9
|
+
toastOptions={{
|
|
10
|
+
unstyled: true,
|
|
11
|
+
classNames: {
|
|
12
|
+
icon: 'shrink-0 size-[24px]',
|
|
13
|
+
toast: 'px-[12px] py-[8px] text-white border-none rounded-md flex w-full sm:width-[--page-container-width] shadow-md',
|
|
14
|
+
description: 'text-[14px] leading-[1.125] mt-[4px]',
|
|
15
|
+
content: 'grow',
|
|
16
|
+
actionButton: 'shrink-0 py-[12px] px-[24px] font-medium',
|
|
17
|
+
cancelButton: 'shrink-0 py-[12px] px-[24px] font-medium',
|
|
18
|
+
},
|
|
19
|
+
}}
|
|
20
|
+
expand={true}
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
Toaster.displayName = 'Toaster'
|
|
27
|
+
interface IToast {
|
|
28
|
+
success: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
|
|
29
|
+
critical: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
|
|
30
|
+
snackbar: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
|
|
31
|
+
}
|
|
32
|
+
const toast: IToast = {
|
|
33
|
+
success: (title, options) => {
|
|
34
|
+
return toastItem(title, {
|
|
35
|
+
position: 'top-center',
|
|
36
|
+
icon: <CheckCircleSolid />,
|
|
37
|
+
classNames: {
|
|
38
|
+
content: 'w-[calc(100%-28px)]',
|
|
39
|
+
},
|
|
40
|
+
className: 'bg-success',
|
|
41
|
+
...options,
|
|
42
|
+
})
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
critical: (title, options) => {
|
|
46
|
+
return toastItem(title, {
|
|
47
|
+
position: 'top-center',
|
|
48
|
+
icon: <InfoSolid />,
|
|
49
|
+
duration: Infinity,
|
|
50
|
+
classNames: {
|
|
51
|
+
content: 'w-[calc(100%-28px)]',
|
|
52
|
+
},
|
|
53
|
+
className: 'bg-critical',
|
|
54
|
+
...options,
|
|
55
|
+
})
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
snackbar: (title, options) => {
|
|
59
|
+
return toastItem(title, {
|
|
60
|
+
position: 'bottom-center',
|
|
61
|
+
classNames: {
|
|
62
|
+
toast: 'items-center',
|
|
63
|
+
content: 'mt-0'
|
|
64
|
+
},
|
|
65
|
+
className: 'bg-[--base]',
|
|
66
|
+
...options,
|
|
67
|
+
})
|
|
68
|
+
},
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { Toaster, toast }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Toaster, toast} from './Toaster'
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
--bg-light: var(--cl-graphite-7);
|
|
93
93
|
--warning: var(--cl-orange-2);
|
|
94
94
|
--warning-light: var(--cl-yellow-7);
|
|
95
|
-
--critical: var(--cl-red-
|
|
95
|
+
--critical: var(--cl-red-2);
|
|
96
96
|
--critical-light: var(--cl-red-7);
|
|
97
97
|
/* --text-quaternary:; */
|
|
98
98
|
|
|
@@ -134,6 +134,9 @@
|
|
|
134
134
|
--btn-txt-primary-hover: var(--cl-blue-3);
|
|
135
135
|
--btn-txt-primary-focus: var(--cl-blue-3);
|
|
136
136
|
--btn-txt-primary-active: var(--cl-blue-1);
|
|
137
|
+
|
|
138
|
+
--btn-widget-bg:var(--page-bg);
|
|
139
|
+
--btn-widget-icon:var(--primary);
|
|
137
140
|
/* =========================================== */
|
|
138
141
|
/* ЦВЕТ КНОПОК */
|
|
139
142
|
|
|
@@ -183,6 +186,11 @@
|
|
|
183
186
|
/* =========================================== */
|
|
184
187
|
/* DRAWER */
|
|
185
188
|
|
|
189
|
+
--page-header-geight: 44px;
|
|
190
|
+
--page-container-width: 375px;
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
186
194
|
}
|
|
187
195
|
|
|
188
196
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" height="36" width="68" xmlns="http://www.w3.org/2000/svg"><path d="m56.8 14.7v7.47h-2.62v-5.24h-2.54v5.24h-2.64v-7.47zm-9.04 4.16c0 2.17-1.82 3.6-4.25 3.6-2.52 0-4.36-1.51-4.36-4.96 0-2.96 1.89-5.4 4.68-5.44 1.22 0 3.85-.06 3.85-.06l-1.18 2.18h-2.38a2.48 2.48 0 0 0 -2.45 2.15 3.6 3.6 0 0 1 2.52-.95c2.23 0 3.57 1.37 3.57 3.48zm-2.7 0c0-.98-.63-1.55-1.54-1.55-.9 0-1.56.58-1.56 1.56a1.51 1.51 0 0 0 1.56 1.6c.98 0 1.54-.73 1.54-1.61zm-8 1.05c-.5.25-1.04.4-1.59.43-1.1.03-2.06-.64-2.06-1.85 0-1.2.85-1.84 2.03-1.84.73 0 1.68.5 1.68.5l1.06-1.9a4.28 4.28 0 0 0 -2.57-.76c-2.61.01-4.61 1.66-4.61 3.99s1.89 3.98 4.6 3.93c.87-.04 1.7-.28 2.46-.7z" fill="#1c1637"/><path d="m4 9.53 3.64 6.5v3.95l-3.64 6.49z" fill="#5b57a2"/><path d="m17.97 13.66 3.4-2.09h6.98l-10.38 6.35z" fill="#d90751"/><path d="m17.95 9.5.02 8.59-3.65-2.24v-12.85z" fill="#fab718"/><path d="m28.35 11.57h-6.97l-3.43-2.07-3.63-6.5z" fill="#ed6f26"/><path d="m17.97 26.5v-4.17l-3.65-2.2v12.87z" fill="#63b22f"/><path d="m21.37 24.43-13.73-8.4-3.64-6.51 24.34 14.9h-6.97z" fill="#1487c9"/><path d="m14.32 33 3.65-6.5 3.4-2.07h6.96l-14 8.57z" fill="#017f36"/><path d="m4 26.47 10.35-6.33-3.48-2.14-3.23 1.97z" fill="#984995"/></svg>
|
package/src/index.ts
CHANGED
|
@@ -19,10 +19,10 @@ import {
|
|
|
19
19
|
AccountCollapsibleContent,
|
|
20
20
|
AccountCollapsibleContentItem,
|
|
21
21
|
} from './Collapsible'
|
|
22
|
-
import { Button, ButtonWidget } from './Button'
|
|
22
|
+
import { Button, buttonVariants, ButtonWidget } from './Button'
|
|
23
23
|
import { Audio } from './Audio'
|
|
24
24
|
import { cn } from './@/lib/utils'
|
|
25
|
-
import { Drawer, DrawerTrigger,
|
|
25
|
+
import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer'
|
|
26
26
|
import { Page } from './Page'
|
|
27
27
|
import { Chip } from './Chip'
|
|
28
28
|
import { InputField, InputLabel, InputMask } from './Input'
|
|
@@ -30,12 +30,12 @@ import { Alert } from './Alert'
|
|
|
30
30
|
import { Switch } from './Switch'
|
|
31
31
|
import { Label } from './Label'
|
|
32
32
|
import { Textarea } from './Textarea'
|
|
33
|
-
import { SelectAccountCard, SelectAsync
|
|
33
|
+
import { SelectAccountCard, SelectAsync } from './Select'
|
|
34
34
|
import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form'
|
|
35
35
|
import { Calendar } from './Calendar'
|
|
36
36
|
import { DatePicker } from './DatePicker'
|
|
37
|
-
|
|
38
|
-
import { Progress } from
|
|
37
|
+
import { Select } from './Select'
|
|
38
|
+
import { Progress } from './Progress'
|
|
39
39
|
import {
|
|
40
40
|
AlertDialog,
|
|
41
41
|
AlertDialogTrigger,
|
|
@@ -50,7 +50,8 @@ import {
|
|
|
50
50
|
import { MessageTyping } from "./Chat"
|
|
51
51
|
import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments'
|
|
52
52
|
import { DigitKeyPad } from "./DigitKeyPad"
|
|
53
|
-
|
|
53
|
+
import { Badge, badgeVariants } from './Badge'
|
|
54
|
+
import { Toaster, toast } from './Toaster'
|
|
54
55
|
|
|
55
56
|
export {
|
|
56
57
|
Tooltip,
|
|
@@ -71,6 +72,7 @@ export {
|
|
|
71
72
|
AccountCollapsibleContent,
|
|
72
73
|
AccountCollapsibleContentItem,
|
|
73
74
|
Button,
|
|
75
|
+
buttonVariants,
|
|
74
76
|
InputField,
|
|
75
77
|
InputLabel,
|
|
76
78
|
Audio,
|
|
@@ -78,7 +80,7 @@ export {
|
|
|
78
80
|
Icon,
|
|
79
81
|
Drawer,
|
|
80
82
|
DrawerTrigger,
|
|
81
|
-
|
|
83
|
+
|
|
82
84
|
DrawerClose,
|
|
83
85
|
DrawerContent,
|
|
84
86
|
BottomNavigation,
|
|
@@ -93,9 +95,6 @@ export {
|
|
|
93
95
|
Label,
|
|
94
96
|
Textarea,
|
|
95
97
|
SelectAccountCard,
|
|
96
|
-
SelectAccount,
|
|
97
|
-
SelectAsync,
|
|
98
|
-
Select,
|
|
99
98
|
Form,
|
|
100
99
|
FormLabel,
|
|
101
100
|
FormField,
|
|
@@ -105,7 +104,9 @@ export {
|
|
|
105
104
|
FormMessage,
|
|
106
105
|
Calendar,
|
|
107
106
|
DatePicker,
|
|
107
|
+
SelectAsync,
|
|
108
108
|
InputMask,
|
|
109
|
+
Select,
|
|
109
110
|
AlertDialog,
|
|
110
111
|
AlertDialogTrigger,
|
|
111
112
|
AlertDialogContent,
|
|
@@ -120,6 +121,10 @@ export {
|
|
|
120
121
|
FavoritePaymentsItem,
|
|
121
122
|
FarvoritePaymentDescription,
|
|
122
123
|
farvoriteLinkClasses,
|
|
124
|
+
Badge,
|
|
125
|
+
badgeVariants,
|
|
123
126
|
DigitKeyPad,
|
|
124
127
|
ButtonWidget,
|
|
125
|
-
|
|
128
|
+
Toaster,
|
|
129
|
+
toast,
|
|
130
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Alert,
|
|
4
|
+
Button,
|
|
5
|
+
cn,
|
|
6
|
+
Drawer,
|
|
7
|
+
DrawerContent,
|
|
8
|
+
DrawerTitle,
|
|
9
|
+
DrawerTrigger,
|
|
10
|
+
InputOTP,
|
|
11
|
+
InputOTPGroup,
|
|
12
|
+
InputOTPSlot,
|
|
13
|
+
Page,
|
|
14
|
+
} from '../../..'
|
|
15
|
+
import { Close } from '../../../Icon'
|
|
16
|
+
|
|
17
|
+
const InputSMS: React.FC = (props) => (
|
|
18
|
+
<InputOTP
|
|
19
|
+
maxLength={5}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<InputOTPGroup className="gap-[10px] mx-auto">
|
|
23
|
+
<InputOTPSlot
|
|
24
|
+
index={0}
|
|
25
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
26
|
+
/>
|
|
27
|
+
<InputOTPSlot
|
|
28
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
29
|
+
index={1}
|
|
30
|
+
/>
|
|
31
|
+
<InputOTPSlot
|
|
32
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
33
|
+
index={2}
|
|
34
|
+
/>
|
|
35
|
+
<InputOTPSlot
|
|
36
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
37
|
+
index={3}
|
|
38
|
+
/>
|
|
39
|
+
<InputOTPSlot
|
|
40
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
41
|
+
index={4}
|
|
42
|
+
/>
|
|
43
|
+
</InputOTPGroup>
|
|
44
|
+
</InputOTP>
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
export const smsSignPage = () => {
|
|
48
|
+
const [snap, setSnap] = useState<number | string | null>('148px')
|
|
49
|
+
return (
|
|
50
|
+
<Page>
|
|
51
|
+
<Page.Navbar>
|
|
52
|
+
<a
|
|
53
|
+
href=""
|
|
54
|
+
className="ml-auto"
|
|
55
|
+
>
|
|
56
|
+
<Close className="text-primary" />
|
|
57
|
+
</a>
|
|
58
|
+
</Page.Navbar>
|
|
59
|
+
{/* <Page.Content className='flex flex-col'>
|
|
60
|
+
<h1 className="mt-[32px] mb-[16px] font-medium text-[20px] text-center leading-[1.2]">
|
|
61
|
+
Введите код из сообщения
|
|
62
|
+
<br />
|
|
63
|
+
<span className="font-normal text-[16px] leading-[1.3]">Код отправлен на +7 960 888 00-00</span>
|
|
64
|
+
</h1>
|
|
65
|
+
|
|
66
|
+
<form className='flex flex-col grow'>
|
|
67
|
+
<div
|
|
68
|
+
className="relative mb-[8px] h-[24px] text-center text-critical"
|
|
69
|
+
role="alert"
|
|
70
|
+
>
|
|
71
|
+
{true && <span>Введен неверный ПИН-код</span>}
|
|
72
|
+
</div>
|
|
73
|
+
<InputSMS />
|
|
74
|
+
<p className="mt-[32px] text-[12px] text-center text-light leading-[1.16]">
|
|
75
|
+
Выслать код повторно через{' '}
|
|
76
|
+
<span
|
|
77
|
+
role="timer"
|
|
78
|
+
aria-live="polite"
|
|
79
|
+
aria-atomic="true"
|
|
80
|
+
>
|
|
81
|
+
1 минуту 16 секунд
|
|
82
|
+
</span>
|
|
83
|
+
</p>
|
|
84
|
+
<div className='mt-auto'>
|
|
85
|
+
<Button className='mt-[32px] w-full'>Подтвердить</Button>
|
|
86
|
+
</div>
|
|
87
|
+
</form>
|
|
88
|
+
</Page.Content> */}
|
|
89
|
+
<Page.Content>
|
|
90
|
+
<Drawer
|
|
91
|
+
snapPoints={['148px', '355px', 1]}
|
|
92
|
+
activeSnapPoint={snap}
|
|
93
|
+
setActiveSnapPoint={setSnap}
|
|
94
|
+
>
|
|
95
|
+
<DrawerTrigger>
|
|
96
|
+
<Button variant="primary">Перевести</Button>
|
|
97
|
+
</DrawerTrigger>
|
|
98
|
+
<DrawerContent>
|
|
99
|
+
<DrawerTitle className="sr-only">Перевести</DrawerTitle>
|
|
100
|
+
<div className="px-[20px] pt-[8px]">
|
|
101
|
+
<p
|
|
102
|
+
className={cn('font-medium text-[12px] leading-[1.16] mb-[16px]', 'text-success', {
|
|
103
|
+
'text-critical': false,
|
|
104
|
+
})}
|
|
105
|
+
>
|
|
106
|
+
Отклонен, <time dateTime="">30 января 2024, 11:23</time>
|
|
107
|
+
</p>
|
|
108
|
+
<p className="font-medium text-[40px] leading-[1.1] mb-[16px]">3598,00 ₽</p>
|
|
109
|
+
<div className="space-y-[8px]">
|
|
110
|
+
<p className="">
|
|
111
|
+
<span className="text-light text-[12px] leading-[1.16]">Платёжное поручение:</span>{' '}
|
|
112
|
+
№91 от 01.01.2024
|
|
113
|
+
</p>
|
|
114
|
+
<p className="">
|
|
115
|
+
<span className="text-light text-[12px] leading-[1.16]">Со счёта:</span> Расчётный
|
|
116
|
+
счёт (•••• 4590)
|
|
117
|
+
</p>
|
|
118
|
+
<p className="">
|
|
119
|
+
<span className="text-light text-[12px] leading-[1.16]">На счёт:</span> Карточный
|
|
120
|
+
счёт (•••• 6416)
|
|
121
|
+
</p>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<hr
|
|
125
|
+
role="presentation"
|
|
126
|
+
className="my-[16px]"
|
|
127
|
+
/>
|
|
128
|
+
|
|
129
|
+
<Alert
|
|
130
|
+
variant="critical"
|
|
131
|
+
className="my-[16px]"
|
|
132
|
+
>
|
|
133
|
+
<Alert.Description>
|
|
134
|
+
Произошла ошибка при отправке в банк: Клиент не является владельцем счёта
|
|
135
|
+
</Alert.Description>
|
|
136
|
+
</Alert>
|
|
137
|
+
|
|
138
|
+
<Button>Повторить</Button>
|
|
139
|
+
|
|
140
|
+
<p className="mt-[32px]">
|
|
141
|
+
<span className="text-light">Назначение:</span>
|
|
142
|
+
<br />
|
|
143
|
+
Перевод между счетами. Без НДС
|
|
144
|
+
</p>
|
|
145
|
+
</div>
|
|
146
|
+
</DrawerContent>
|
|
147
|
+
</Drawer>
|
|
148
|
+
</Page.Content>
|
|
149
|
+
</Page>
|
|
150
|
+
)
|
|
151
|
+
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { GroupBase, Props } from 'react-select';
|
|
3
|
-
declare type SelectAccountProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Props<Option, IsMulti, Group>;
|
|
4
|
-
declare function SelectAccount<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectAccountProps<Option, IsMulti, Group>): React.JSX.Element;
|
|
5
|
-
declare namespace SelectAccount {
|
|
6
|
-
var displayName: string;
|
|
7
|
-
}
|
|
8
|
-
export { SelectAccount };
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SelectAccount = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
|
-
const Icon_1 = require("../../src/Icon");
|
|
7
|
-
const react_select_1 = (0, tslib_1.__importStar)(require("react-select"));
|
|
8
|
-
const utils_1 = require("../@/lib/utils");
|
|
9
|
-
const components_1 = require("./components");
|
|
10
|
-
const Option = ({ children, ...props }) => {
|
|
11
|
-
const { isSelected, isFocused, isDisabled,
|
|
12
|
-
// @ts-ignore
|
|
13
|
-
data: { label, account, balance, cur }, } = props;
|
|
14
|
-
return (React.createElement(react_select_1.components.Option, { className: (0, utils_1.cn)(components_1.optionClasses, 'items-start', { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled }), ...props },
|
|
15
|
-
React.createElement("span", { className: "flex basis-0 grow" },
|
|
16
|
-
React.createElement("span", null,
|
|
17
|
-
React.createElement("span", { className: "text-[16px`] leading-[1.375]" }, label),
|
|
18
|
-
React.createElement("br", null),
|
|
19
|
-
React.createElement("span", { className: "text-[12px] text-light" }, account)),
|
|
20
|
-
React.createElement("span", { className: "ml-auto shrink-0" }, cur)),
|
|
21
|
-
React.createElement("span", { className: "ml-[16px] shrink-0 size-[24px]" }, isSelected && (React.createElement(Icon_1.CheckSmall, { width: "24", height: "24", className: "text-primary" })))));
|
|
22
|
-
};
|
|
23
|
-
const SingleValue = ({ children, ...props }) => {
|
|
24
|
-
const {
|
|
25
|
-
// @ts-ignore
|
|
26
|
-
data: { account, cur }, } = props;
|
|
27
|
-
return (React.createElement(react_select_1.components.SingleValue, { className: "col-start-1 col-end-3 row-start-1 row-end-2", ...props },
|
|
28
|
-
account,
|
|
29
|
-
" (",
|
|
30
|
-
cur,
|
|
31
|
-
")"));
|
|
32
|
-
};
|
|
33
|
-
function SelectAccount(props) {
|
|
34
|
-
return (React.createElement(react_select_1.default, { components: {
|
|
35
|
-
Control: components_1.Control,
|
|
36
|
-
Option,
|
|
37
|
-
SingleValue,
|
|
38
|
-
DropdownIndicator: components_1.DropdownIndicator,
|
|
39
|
-
IndicatorSeparator: () => null,
|
|
40
|
-
Menu: components_1.Menu,
|
|
41
|
-
ValueContainer: components_1.ValueContainer,
|
|
42
|
-
Placeholder: components_1.Placeholder,
|
|
43
|
-
Input: components_1.Input,
|
|
44
|
-
LoadingIndicator: components_1.LoadingIndicator,
|
|
45
|
-
IndicatorsContainer: components_1.IndicatorsContainer,
|
|
46
|
-
}, styles: components_1.colourStyles, unstyled: true, ...props }));
|
|
47
|
-
}
|
|
48
|
-
exports.SelectAccount = SelectAccount;
|
|
49
|
-
SelectAccount.displayName = 'SelectAccount';
|
|
50
|
-
//# sourceMappingURL=SelectAccount.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectAccount.js","sourceRoot":"","sources":["../../src/Select/SelectAccount.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yCAA2C;AAC3C,0EAAkG;AAClG,0CAAmC;AACnC,6CAWqB;AAErB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IACtD,MAAM,EACL,UAAU,EACV,SAAS,EACT,UAAU;IACV,aAAa;IACb,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GACtC,GAAG,KAAK,CAAA;IACT,OAAO,CACN,oBAAC,yBAAU,CAAC,MAAM,IACjB,SAAS,EAAE,IAAA,UAAE,EAAC,0BAAa,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,gCAAgC,EAAE,UAAU,EAAE,CAAC,KACpH,KAAK;QAET,8BAAM,SAAS,EAAC,mBAAmB;YAClC;gBACC,8BAAM,SAAS,EAAC,8BAA8B,IAAE,KAAK,CAAQ;gBAC7D,+BAAM;gBACN,8BAAM,SAAS,EAAC,wBAAwB,IAAE,OAAO,CAAQ,CACnD;YACP,8BAAM,SAAS,EAAC,kBAAkB,IAAE,GAAG,CAAQ,CACzC;QAEP,8BAAM,SAAS,EAAC,gCAAgC,IAC9C,UAAU,IAAI,CACd,oBAAC,iBAAU,IACV,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,SAAS,EAAC,cAAc,GACvB,CACF,CACK,CACY,CACpB,CAAA;AACF,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAChE,MAAM;IACL,aAAa;IACb,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GACtB,GAAG,KAAK,CAAA;IACT,OAAO,CACN,oBAAC,yBAAU,CAAC,WAAW,IACtB,SAAS,EAAC,6CAA6C,KACnD,KAAK;QAER,OAAO;;QAAI,GAAG;YACS,CACzB,CAAA;AACF,CAAC,CAAA;AAQD,SAAS,aAAa,CACrB,KAAiD;IAEjD,OAAO,CACN,oBAAC,sBAAM,IACN,UAAU,EAAE;YACX,OAAO,EAAP,oBAAO;YACP,MAAM;YACN,WAAW;YACX,iBAAiB,EAAjB,8BAAiB;YACjB,kBAAkB,EAAE,GAAG,EAAE,CAAC,IAAI;YAC9B,IAAI,EAAJ,iBAAI;YACJ,cAAc,EAAd,2BAAc;YACd,WAAW,EAAX,wBAAW;YACX,KAAK,EAAL,kBAAK;YACL,gBAAgB,EAAhB,6BAAgB;YAChB,mBAAmB,EAAnB,gCAAmB;SACnB,EACD,MAAM,EAAE,yBAAY,EACpB,QAAQ,EAAE,IAAI,KACV,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAIQ,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ControlProps, OptionProps, DropdownIndicatorProps, StylesConfig, SingleValueProps, MenuProps, PlaceholderProps, ValueContainerProps, InputProps, LoadingIndicatorProps, IndicatorsContainerProps } from 'react-select';
|
|
3
|
-
declare const Input: ({ ...props }: InputProps) => React.JSX.Element;
|
|
4
|
-
declare const Control: ({ children, ...props }: ControlProps) => React.JSX.Element;
|
|
5
|
-
declare const colourStyles: StylesConfig;
|
|
6
|
-
declare const optionClasses = "flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none";
|
|
7
|
-
declare const Option: ({ children, ...props }: OptionProps) => React.JSX.Element;
|
|
8
|
-
declare const IndicatorsContainer: ({ children, ...props }: IndicatorsContainerProps) => React.JSX.Element;
|
|
9
|
-
declare const LoadingIndicator: ({ ...props }: LoadingIndicatorProps) => React.JSX.Element;
|
|
10
|
-
declare const DropdownIndicator: ({ children, ...props }: DropdownIndicatorProps) => React.JSX.Element;
|
|
11
|
-
declare const ValueContainer: ({ children, ...props }: ValueContainerProps) => React.JSX.Element;
|
|
12
|
-
declare const SingleValue: ({ children, ...props }: SingleValueProps) => React.JSX.Element;
|
|
13
|
-
declare const Menu: ({ children, ...props }: MenuProps) => React.JSX.Element;
|
|
14
|
-
declare const Placeholder: ({ children, ...props }: PlaceholderProps) => React.JSX.Element;
|
|
15
|
-
export { Input, Control, colourStyles, optionClasses, Option, IndicatorsContainer, LoadingIndicator, DropdownIndicator, ValueContainer, SingleValue, Menu, Placeholder, };
|