@kvell-group/ui 1.15.7 → 1.16.1
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/package.json +20 -7
- package/src/components/Button/Button.stories.tsx +8 -9
- package/src/components/Inputs/CardExpireDateInput/CardExpireDateInput.stories.tsx +43 -0
- package/src/components/Inputs/CardExpireDateInput/CardExpireDateInput.tsx +27 -0
- package/src/components/Inputs/CardExpireDateInput/index.ts +1 -0
- package/src/components/Inputs/CardInput/CardInput.stories.tsx +3 -4
- package/src/components/Inputs/CardInput/CardInput.tsx +4 -2
- package/src/components/Inputs/CvvInput/CvvInput.stories.tsx +3 -4
- package/src/components/Inputs/CvvInput/CvvInput.tsx +2 -0
- package/src/components/Inputs/Input.module.css +2 -2
- package/src/components/Inputs/Input.stories.tsx +3 -4
- package/src/components/Inputs/Input.tsx +1 -0
- package/src/components/Inputs/MaskedInput/MaskedInput.stories.tsx +5 -25
- package/src/components/Inputs/PasswordInput/PasswordInput.stories.tsx +3 -4
- package/src/components/Inputs/PasswordInput/PasswordInput.tsx +1 -0
- package/src/components/{MainProvider/MantineProvider.tsx → KvellUiProvider/KvellUiProvider.tsx} +6 -1
- package/src/components/KvellUiProvider/index.ts +1 -0
- package/src/components/Loader/Loader.stories.tsx +3 -4
- package/src/components/Modal/Modal.stories.tsx +3 -4
- package/src/components/Modal/Modal.tsx +1 -0
- package/src/components/Switch/Switch.module.css +4 -0
- package/src/components/Switch/Switch.stories.tsx +3 -4
- package/src/components/Text/Text.stories.tsx +3 -4
- package/src/components/theme.ts +1 -0
- package/src/core-components/Divider.tsx +2 -0
- package/src/index.js +24 -0
- package/src/index.ts +1 -18
- package/src/mantine.js +2 -0
- package/src/mantine.ts +1 -0
- package/src/assets/arrow-left.svg +0 -3
- package/src/assets/calendar.svg +0 -3
- package/src/assets/card.svg +0 -3
- package/src/assets/lead-icon.svg +0 -3
- package/src/components/MainProvider/index.ts +0 -1
package/package.json
CHANGED
|
@@ -2,13 +2,23 @@
|
|
|
2
2
|
"name": "@kvell-group/ui",
|
|
3
3
|
"author": "Kvell Group",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.16.1",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"main": "src/index.
|
|
8
|
-
"types": "src/index.ts",
|
|
7
|
+
"main": "./src/index.js",
|
|
8
|
+
"types": "./src/index.ts",
|
|
9
9
|
"files": [
|
|
10
10
|
"src"
|
|
11
11
|
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./src/index.js",
|
|
15
|
+
"types": "./src/index.ts"
|
|
16
|
+
},
|
|
17
|
+
"./mantine": {
|
|
18
|
+
"import": "./src/mantine.js",
|
|
19
|
+
"types": "./src/mantine.ts"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
12
22
|
"scripts": {
|
|
13
23
|
"storybook": "storybook dev -p 6006",
|
|
14
24
|
"semantic-release": "semantic-release",
|
|
@@ -18,9 +28,12 @@
|
|
|
18
28
|
"format:fix": "prettier --write .",
|
|
19
29
|
"build-storybook": "storybook build"
|
|
20
30
|
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@mantine/core": "^8.0.1",
|
|
33
|
+
"@mantine/hooks": "^8.0.1",
|
|
34
|
+
"@remixicon/react": "^4.6.0"
|
|
35
|
+
},
|
|
21
36
|
"peerDependencies": {
|
|
22
|
-
"@mantine/core": "^7.17.3",
|
|
23
|
-
"@mantine/hooks": "^7.17.3",
|
|
24
37
|
"react": "^18.0.0",
|
|
25
38
|
"react-dom": "^18.0.0",
|
|
26
39
|
"react-imask": "^7.6.1"
|
|
@@ -43,6 +56,7 @@
|
|
|
43
56
|
"@vitest/browser": "^3.1.1",
|
|
44
57
|
"@vitest/coverage-v8": "^3.1.1",
|
|
45
58
|
"autoprefixer": "^10.4.21",
|
|
59
|
+
"clsx": "^2.1.1",
|
|
46
60
|
"eslint": "^9.21.0",
|
|
47
61
|
"eslint-config-prettier": "^10.1.1",
|
|
48
62
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
@@ -66,8 +80,7 @@
|
|
|
66
80
|
"vite-plugin-lib-inject-css": "^2.2.1",
|
|
67
81
|
"vite-plugin-svgr": "^4.3.0",
|
|
68
82
|
"vite-tsconfig-paths": "^5.1.4",
|
|
69
|
-
"vitest": "^3.1.1"
|
|
70
|
-
"clsx": "^2.1.1"
|
|
83
|
+
"vitest": "^3.1.1"
|
|
71
84
|
},
|
|
72
85
|
"publishConfig": {
|
|
73
86
|
"access": "public"
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import ArrowLeftSVG from '
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
|
+
|
|
5
|
+
import { RiArrowLeftLine as ArrowLeftSVG, RiLockLine as LockSVG } from '@remixicon/react'
|
|
6
6
|
|
|
7
|
-
import '@mantine/core/styles.css'
|
|
8
7
|
import { theme } from '@/components/theme'
|
|
9
8
|
import { Button } from '@/components/Button'
|
|
10
9
|
import { Text } from '@/components/Text/Text'
|
|
@@ -25,9 +24,9 @@ const meta = {
|
|
|
25
24
|
argTypes: { variant: ButtonVariants },
|
|
26
25
|
component: Button,
|
|
27
26
|
decorators: (Story) => (
|
|
28
|
-
<
|
|
27
|
+
<KvellUiProvider theme={theme}>
|
|
29
28
|
<Story />
|
|
30
|
-
</
|
|
29
|
+
</KvellUiProvider>
|
|
31
30
|
),
|
|
32
31
|
} satisfies Meta<typeof Button>
|
|
33
32
|
|
|
@@ -61,7 +60,7 @@ export const ComponentButton: Story = {
|
|
|
61
60
|
export const PrimaryButton: Story = {
|
|
62
61
|
args: {
|
|
63
62
|
variant: PRIMARY_BUTTON_VARIANT,
|
|
64
|
-
leftSection: <
|
|
63
|
+
leftSection: <LockSVG size={20} />,
|
|
65
64
|
fullWidth: true,
|
|
66
65
|
style: { maxWidth: '465px' },
|
|
67
66
|
children: <Text variant={BODY_S_MEDIUM_FONT_VARIANT}>Оплатить 7 605,30 RUB</Text>,
|
|
@@ -72,7 +71,7 @@ export const PrimaryButton: Story = {
|
|
|
72
71
|
export const SecondaryButton: Story = {
|
|
73
72
|
args: {
|
|
74
73
|
variant: SECONDARY_BUTTON_VARIANT,
|
|
75
|
-
leftSection: <ArrowLeftSVG />,
|
|
74
|
+
leftSection: <ArrowLeftSVG size={20} />,
|
|
76
75
|
children: 'Вернуться на сайт продавца',
|
|
77
76
|
},
|
|
78
77
|
}
|
|
@@ -80,7 +79,7 @@ export const SecondaryButton: Story = {
|
|
|
80
79
|
export const TertiaryButton: Story = {
|
|
81
80
|
args: {
|
|
82
81
|
variant: TERTIARY_BUTTON_VARIANT,
|
|
83
|
-
leftSection: <ArrowLeftSVG />,
|
|
82
|
+
leftSection: <ArrowLeftSVG size={20} />,
|
|
84
83
|
children: 'Сохранённые карты',
|
|
85
84
|
},
|
|
86
85
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
|
+
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
|
+
|
|
5
|
+
import { theme } from '@/components/theme'
|
|
6
|
+
import { CardExpireDateInput as CardExpireDateInputComponent } from '@/components/Inputs/CardExpireDateInput'
|
|
7
|
+
|
|
8
|
+
// ----------------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
const meta = {
|
|
11
|
+
title: 'Components/Inputs/CardExpireDate',
|
|
12
|
+
component: CardExpireDateInputComponent,
|
|
13
|
+
decorators: (Story) => (
|
|
14
|
+
<KvellUiProvider theme={theme}>
|
|
15
|
+
<div style={{ maxWidth: '144px' }}>
|
|
16
|
+
<Story />
|
|
17
|
+
</div>
|
|
18
|
+
</KvellUiProvider>
|
|
19
|
+
),
|
|
20
|
+
} satisfies Meta<typeof CardExpireDateInputComponent>
|
|
21
|
+
|
|
22
|
+
type Story = StoryObj<typeof CardExpireDateInputComponent>
|
|
23
|
+
|
|
24
|
+
// ----------------------------------------------------------------------
|
|
25
|
+
|
|
26
|
+
export const CardExpireDateInput: Story = {
|
|
27
|
+
args: {
|
|
28
|
+
value: '1225',
|
|
29
|
+
label: 'Срок действия',
|
|
30
|
+
},
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export const CardExpireDateInputError: Story = {
|
|
34
|
+
args: {
|
|
35
|
+
value: '0120',
|
|
36
|
+
label: 'Срок действия',
|
|
37
|
+
error: 'Срок действия карты истёк',
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// ----------------------------------------------------------------------
|
|
42
|
+
|
|
43
|
+
export default meta
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { MaskedInput } from '../MaskedInput'
|
|
2
|
+
|
|
3
|
+
import type { MaskedInputProps } from '../types'
|
|
4
|
+
import { forwardRef } from 'react'
|
|
5
|
+
import { CARD_EXPIRY_DATE_MASK } from '../../../constants/masks'
|
|
6
|
+
import { IMask } from 'react-imask'
|
|
7
|
+
import { RiCalendarLine as CalendarSVG } from '@remixicon/react'
|
|
8
|
+
|
|
9
|
+
// ----------------------------------------------------------------------
|
|
10
|
+
|
|
11
|
+
const mask = IMask.createMask({ mask: CARD_EXPIRY_DATE_MASK })
|
|
12
|
+
|
|
13
|
+
// ----------------------------------------------------------------------
|
|
14
|
+
|
|
15
|
+
export const CardExpireDateInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => {
|
|
16
|
+
return (
|
|
17
|
+
<MaskedInput
|
|
18
|
+
ref={ref}
|
|
19
|
+
autoComplete='cc-exp'
|
|
20
|
+
inputMode='numeric'
|
|
21
|
+
{...props}
|
|
22
|
+
mask={mask}
|
|
23
|
+
placeholder='____ ____ ____ ____'
|
|
24
|
+
leftSection={<CalendarSVG size={20} />}
|
|
25
|
+
/>
|
|
26
|
+
)
|
|
27
|
+
})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CardExpireDateInput } from './CardExpireDateInput'
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
|
|
8
7
|
import { CardInput as CardInputComponent } from '@/components/Inputs/CardInput'
|
|
@@ -13,11 +12,11 @@ const meta = {
|
|
|
13
12
|
title: 'Components/Inputs/CardInput',
|
|
14
13
|
component: CardInputComponent,
|
|
15
14
|
decorators: (Story) => (
|
|
16
|
-
<
|
|
15
|
+
<KvellUiProvider theme={theme}>
|
|
17
16
|
<div style={{ maxWidth: '465px' }}>
|
|
18
17
|
<Story />
|
|
19
18
|
</div>
|
|
20
|
-
</
|
|
19
|
+
</KvellUiProvider>
|
|
21
20
|
),
|
|
22
21
|
} satisfies Meta<typeof CardInputComponent>
|
|
23
22
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import CardSVG from '../../../assets/card.svg'
|
|
2
1
|
import { MaskedInput } from '../MaskedInput'
|
|
3
2
|
import { useCardLogo } from './useCardLogo'
|
|
4
3
|
import type { MaskedInputProps } from '../types'
|
|
5
4
|
import { forwardRef } from 'react'
|
|
6
5
|
import { CARD_NUMBER_MASK } from '../../../constants/masks'
|
|
7
6
|
import { IMask } from 'react-imask'
|
|
7
|
+
import { RiBankCardLine as CardSVG } from '@remixicon/react'
|
|
8
8
|
|
|
9
9
|
// ----------------------------------------------------------------------
|
|
10
10
|
|
|
@@ -18,10 +18,12 @@ export const CardInput = forwardRef<HTMLInputElement, MaskedInputProps>((props,
|
|
|
18
18
|
return (
|
|
19
19
|
<MaskedInput
|
|
20
20
|
ref={ref}
|
|
21
|
+
inputMode='numeric'
|
|
22
|
+
autoComplete='cc-number'
|
|
21
23
|
{...props}
|
|
22
24
|
mask={mask}
|
|
23
25
|
rightSection={CardLogo && <CardLogo />}
|
|
24
|
-
leftSection={<CardSVG />}
|
|
26
|
+
leftSection={<CardSVG size={20} />}
|
|
25
27
|
placeholder='____ ____ ____ ____'
|
|
26
28
|
/>
|
|
27
29
|
)
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { CvvInput as CvvInputComponent } from '@/components/Inputs/CvvInput'
|
|
8
7
|
|
|
@@ -12,11 +11,11 @@ const meta = {
|
|
|
12
11
|
title: 'Components/Inputs/CvvInput',
|
|
13
12
|
component: CvvInputComponent,
|
|
14
13
|
decorators: (Story) => (
|
|
15
|
-
<
|
|
14
|
+
<KvellUiProvider theme={theme}>
|
|
16
15
|
<div style={{ maxWidth: '304px' }}>
|
|
17
16
|
<Story />
|
|
18
17
|
</div>
|
|
19
|
-
</
|
|
18
|
+
</KvellUiProvider>
|
|
20
19
|
),
|
|
21
20
|
} satisfies Meta<typeof CvvInputComponent>
|
|
22
21
|
|
|
@@ -20,6 +20,8 @@ const mask = IMask.createMask({ mask: CARD_CVV_MASK })
|
|
|
20
20
|
export const CvvInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => (
|
|
21
21
|
<MaskedInput
|
|
22
22
|
ref={ref}
|
|
23
|
+
inputMode='numeric'
|
|
24
|
+
autoComplete='cc-csc'
|
|
23
25
|
{...props}
|
|
24
26
|
mask={mask}
|
|
25
27
|
classNames={{ ...restClassNames, input: classNames }}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.input {
|
|
2
2
|
border-radius: var(--mantine-radius-xl);
|
|
3
3
|
border: 1px solid var(--mantine-color-border-action-normal-0);
|
|
4
|
-
box-shadow: var(--mantine-
|
|
5
|
-
color: var(--mantine-color-text-base-primary);
|
|
4
|
+
box-shadow: var(--mantine-shadow-xs);
|
|
5
|
+
color: var(--mantine-color-text-base-primary-0);
|
|
6
6
|
|
|
7
7
|
--input-height: 2.5rem;
|
|
8
8
|
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { Input as InputComponent } from '@/components/Inputs/Input'
|
|
8
7
|
|
|
@@ -12,11 +11,11 @@ const meta = {
|
|
|
12
11
|
title: 'Components/Inputs/Input',
|
|
13
12
|
component: InputComponent,
|
|
14
13
|
decorators: (Story) => (
|
|
15
|
-
<
|
|
14
|
+
<KvellUiProvider theme={theme}>
|
|
16
15
|
<div style={{ maxWidth: '465px' }}>
|
|
17
16
|
<Story />
|
|
18
17
|
</div>
|
|
19
|
-
</
|
|
18
|
+
</KvellUiProvider>
|
|
20
19
|
),
|
|
21
20
|
} satisfies Meta<typeof InputComponent>
|
|
22
21
|
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { MaskedInput as MaskedInputComponent } from '@/components/Inputs/MaskedInput'
|
|
8
|
-
|
|
9
|
-
import {
|
|
7
|
+
|
|
8
|
+
import { PHONE_MASK } from '@/constants/masks'
|
|
10
9
|
|
|
11
10
|
// ----------------------------------------------------------------------
|
|
12
11
|
|
|
@@ -14,11 +13,11 @@ const meta = {
|
|
|
14
13
|
title: 'Components/Inputs/MaskedInput',
|
|
15
14
|
component: MaskedInputComponent,
|
|
16
15
|
decorators: (Story) => (
|
|
17
|
-
<
|
|
16
|
+
<KvellUiProvider theme={theme}>
|
|
18
17
|
<div style={{ maxWidth: '304px' }}>
|
|
19
18
|
<Story />
|
|
20
19
|
</div>
|
|
21
|
-
</
|
|
20
|
+
</KvellUiProvider>
|
|
22
21
|
),
|
|
23
22
|
} satisfies Meta<typeof MaskedInputComponent>
|
|
24
23
|
|
|
@@ -34,25 +33,6 @@ export const MaskedInput: Story = {
|
|
|
34
33
|
},
|
|
35
34
|
}
|
|
36
35
|
|
|
37
|
-
export const MaskedInputExpiryDate: Story = {
|
|
38
|
-
args: {
|
|
39
|
-
leftSection: <CalendarSVG />,
|
|
40
|
-
mask: CARD_EXPIRY_DATE_MASK,
|
|
41
|
-
value: '1225',
|
|
42
|
-
label: 'Срок действия',
|
|
43
|
-
},
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export const MaskedInputExpiryDateError: Story = {
|
|
47
|
-
args: {
|
|
48
|
-
leftSection: <CalendarSVG />,
|
|
49
|
-
mask: CARD_EXPIRY_DATE_MASK,
|
|
50
|
-
value: '0120',
|
|
51
|
-
label: 'Срок действия',
|
|
52
|
-
error: 'Срок действия карты истёк',
|
|
53
|
-
},
|
|
54
|
-
}
|
|
55
|
-
|
|
56
36
|
// ----------------------------------------------------------------------
|
|
57
37
|
|
|
58
38
|
export default meta
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { PasswordInput as PasswordInputComponent } from '@/components/Inputs/PasswordInput/PasswordInput'
|
|
8
7
|
|
|
@@ -12,11 +11,11 @@ const meta = {
|
|
|
12
11
|
title: 'Components/Inputs/PasswordInput',
|
|
13
12
|
component: PasswordInputComponent,
|
|
14
13
|
decorators: (Story) => (
|
|
15
|
-
<
|
|
14
|
+
<KvellUiProvider theme={theme}>
|
|
16
15
|
<div style={{ maxWidth: '465px' }}>
|
|
17
16
|
<Story />
|
|
18
17
|
</div>
|
|
19
|
-
</
|
|
18
|
+
</KvellUiProvider>
|
|
20
19
|
),
|
|
21
20
|
} satisfies Meta<typeof PasswordInputComponent>
|
|
22
21
|
|
package/src/components/{MainProvider/MantineProvider.tsx → KvellUiProvider/KvellUiProvider.tsx}
RENAMED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { MantineProvider as MantineProviderCore } from '@mantine/core'
|
|
2
2
|
import type { MantineProviderProps } from '@mantine/core'
|
|
3
3
|
|
|
4
|
+
import '@mantine/core/styles.layer.css'
|
|
5
|
+
import '@mantine/core/styles/baseline.layer.css'
|
|
6
|
+
import '@mantine/core/styles/default-css-variables.layer.css'
|
|
7
|
+
import '@mantine/core/styles/global.layer.css'
|
|
8
|
+
|
|
4
9
|
// ----------------------------------------------------------------------
|
|
5
10
|
|
|
6
|
-
export function
|
|
11
|
+
export function KvellUiProvider({ children, theme, ...restProps }: MantineProviderProps) {
|
|
7
12
|
return (
|
|
8
13
|
<MantineProviderCore
|
|
9
14
|
theme={theme}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { KvellUiProvider } from './KvellUiProvider'
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { Loader } from '@/components/Loader'
|
|
8
7
|
import { LoaderSizes } from '@/components/Loader/constants'
|
|
@@ -13,11 +12,11 @@ const meta = {
|
|
|
13
12
|
title: 'Components/Loader',
|
|
14
13
|
component: Loader,
|
|
15
14
|
decorators: (Story) => (
|
|
16
|
-
<
|
|
15
|
+
<KvellUiProvider theme={theme}>
|
|
17
16
|
<div style={{ width: '120px', height: '120px', backgroundColor: 'whitesmoke' }}>
|
|
18
17
|
<Story />
|
|
19
18
|
</div>
|
|
20
|
-
</
|
|
19
|
+
</KvellUiProvider>
|
|
21
20
|
),
|
|
22
21
|
} satisfies Meta<typeof Loader>
|
|
23
22
|
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
import { Text } from '@/components/Text'
|
|
5
5
|
|
|
6
|
-
import '@mantine/core/styles.css'
|
|
7
6
|
import { theme } from '@/components/theme'
|
|
8
7
|
import { Modal } from '@/components/Modal'
|
|
9
8
|
import { Button } from '@/components/Button'
|
|
@@ -66,9 +65,9 @@ const meta = {
|
|
|
66
65
|
title: 'Components/Modal',
|
|
67
66
|
component: ModalWrapper,
|
|
68
67
|
decorators: (Story) => (
|
|
69
|
-
<
|
|
68
|
+
<KvellUiProvider theme={theme}>
|
|
70
69
|
<Story />
|
|
71
|
-
</
|
|
70
|
+
</KvellUiProvider>
|
|
72
71
|
),
|
|
73
72
|
} satisfies Meta<typeof ModalWrapper>
|
|
74
73
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Modal as ModalBase } from '@mantine/core'
|
|
2
|
+
import '@mantine/core/styles/Modal.layer.css'
|
|
2
3
|
import classNames from './Modal.module.css'
|
|
3
4
|
import textClassNames from '../../styles/typography.module.css'
|
|
4
5
|
import { BODY_M_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { Switch } from '@/components/Switch'
|
|
8
7
|
|
|
@@ -12,9 +11,9 @@ const meta = {
|
|
|
12
11
|
title: 'Components/Switch',
|
|
13
12
|
component: Switch,
|
|
14
13
|
decorators: (Story) => (
|
|
15
|
-
<
|
|
14
|
+
<KvellUiProvider theme={theme}>
|
|
16
15
|
<Story />
|
|
17
|
-
</
|
|
16
|
+
</KvellUiProvider>
|
|
18
17
|
),
|
|
19
18
|
} satisfies Meta<typeof Switch>
|
|
20
19
|
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { KvellUiProvider } from '@/components/KvellUiProvider'
|
|
4
4
|
|
|
5
|
-
import '@mantine/core/styles.css'
|
|
6
5
|
import { theme } from '@/components/theme'
|
|
7
6
|
import { Text } from '@/components/Text/Text'
|
|
8
7
|
import { FontVariants } from '@/constants/font-variants'
|
|
@@ -13,9 +12,9 @@ const meta = {
|
|
|
13
12
|
title: 'Components/Text',
|
|
14
13
|
component: Text,
|
|
15
14
|
decorators: (Story) => (
|
|
16
|
-
<
|
|
15
|
+
<KvellUiProvider theme={theme}>
|
|
17
16
|
<Story />
|
|
18
|
-
</
|
|
17
|
+
</KvellUiProvider>
|
|
19
18
|
),
|
|
20
19
|
} satisfies Meta<typeof Text>
|
|
21
20
|
|
package/src/components/theme.ts
CHANGED
|
@@ -34,6 +34,7 @@ export const theme: MantineThemeOverride = {
|
|
|
34
34
|
// icon/base/secondary
|
|
35
35
|
|
|
36
36
|
//text
|
|
37
|
+
'text-base-primary': colorsTuple('#14151a'),
|
|
37
38
|
'text-base-secondary': colorsTuple('#0f132499'),
|
|
38
39
|
'text-base-tertiary': colorsTuple('#0d112666'),
|
|
39
40
|
'text-base-quaternary': colorsTuple('#0a0f2940'),
|
package/src/index.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// components
|
|
2
|
+
export { Button } from './components/Button'
|
|
3
|
+
|
|
4
|
+
// constants
|
|
5
|
+
export { theme } from './components/theme'
|
|
6
|
+
|
|
7
|
+
//inputs
|
|
8
|
+
export { Input } from './components/Inputs'
|
|
9
|
+
export { CardInput } from './components/Inputs/CardInput'
|
|
10
|
+
export { MaskedInput } from './components/Inputs/MaskedInput'
|
|
11
|
+
export { PasswordInput } from './components/Inputs/PasswordInput'
|
|
12
|
+
export { CvvInput } from './components/Inputs/CvvInput'
|
|
13
|
+
export { Checkbox } from './components/Inputs/Checkbox'
|
|
14
|
+
|
|
15
|
+
export { Loader } from './components/Loader'
|
|
16
|
+
export { Modal } from './components/Modal'
|
|
17
|
+
export { Switch } from './components/Switch'
|
|
18
|
+
export { Text } from './components/Text'
|
|
19
|
+
|
|
20
|
+
//providers
|
|
21
|
+
export { KvellUiProvider } from './components/KvellUiProvider'
|
|
22
|
+
|
|
23
|
+
//core-components
|
|
24
|
+
export { Divider } from './core-components/Divider'
|
package/src/index.ts
CHANGED
|
@@ -1,18 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { theme } from './components/theme'
|
|
3
|
-
|
|
4
|
-
// components
|
|
5
|
-
export { Button } from './components/Button'
|
|
6
|
-
|
|
7
|
-
//inputs
|
|
8
|
-
export { Input } from './components/Inputs'
|
|
9
|
-
export { CardInput } from './components/Inputs/CardInput'
|
|
10
|
-
export { MaskedInput } from './components/Inputs/MaskedInput'
|
|
11
|
-
export { PasswordInput } from './components/Inputs/PasswordInput'
|
|
12
|
-
export { CvvInput } from './components/Inputs/CvvInput'
|
|
13
|
-
export { Checkbox } from './components/Inputs/Checkbox'
|
|
14
|
-
|
|
15
|
-
export { Loader } from './components/Loader'
|
|
16
|
-
export { Modal } from './components/Modal'
|
|
17
|
-
export { Switch } from './components/Switch'
|
|
18
|
-
export { Text } from './components/Text'
|
|
1
|
+
export * from './index'
|
package/src/mantine.js
ADDED
package/src/mantine.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './mantine'
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M6.52334 9.1664H16.6667V10.8331H6.52334L10.9933 15.3031L9.81501 16.4814L3.33334 9.99973L9.81501 3.51807L10.9933 4.6964L6.52334 9.1664Z" fill="currentColor" fill-opacity="0.6" style="fill:#0F1324;fill:color(display-p3 0.0588 0.0745 0.1412);fill-opacity:0.6;"/>
|
|
3
|
-
</svg>
|
package/src/assets/calendar.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M14.6667 2.49992H18C18.221 2.49992 18.433 2.58772 18.5892 2.744C18.7455 2.90028 18.8333 3.11224 18.8333 3.33325V16.6666C18.8333 16.8876 18.7455 17.0996 18.5892 17.2558C18.433 17.4121 18.221 17.4999 18 17.4999H2.99999C2.77898 17.4999 2.56701 17.4121 2.41073 17.2558C2.25445 17.0996 2.16666 16.8876 2.16666 16.6666V3.33325C2.16666 3.11224 2.25445 2.90028 2.41073 2.744C2.56701 2.58772 2.77898 2.49992 2.99999 2.49992H6.33332V0.833252H7.99999V2.49992H13V0.833252H14.6667V2.49992ZM13 4.16659H7.99999V5.83325H6.33332V4.16659H3.83332V7.49992H17.1667V4.16659H14.6667V5.83325H13V4.16659ZM17.1667 9.16658H3.83332V15.8333H17.1667V9.16658Z" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
|
|
3
|
-
</svg>
|
package/src/assets/card.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M2.49984 2.5H17.4998C17.7209 2.5 17.9328 2.5878 18.0891 2.74408C18.2454 2.90036 18.3332 3.11232 18.3332 3.33333V16.6667C18.3332 16.8877 18.2454 17.0996 18.0891 17.2559C17.9328 17.4122 17.7209 17.5 17.4998 17.5H2.49984C2.27882 17.5 2.06686 17.4122 1.91058 17.2559C1.7543 17.0996 1.6665 16.8877 1.6665 16.6667V3.33333C1.6665 3.11232 1.7543 2.90036 1.91058 2.74408C2.06686 2.5878 2.27882 2.5 2.49984 2.5ZM16.6665 9.16667H3.33317V15.8333H16.6665V9.16667ZM16.6665 7.5V4.16667H3.33317V7.5H16.6665ZM11.6665 12.5H14.9998V14.1667H11.6665V12.5Z" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
|
|
3
|
-
</svg>
|
package/src/assets/lead-icon.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M15.8333 8.33334H16.6667C16.8877 8.33334 17.0996 8.42114 17.2559 8.57742C17.4122 8.7337 17.5 8.94566 17.5 9.16667V17.5C17.5 17.721 17.4122 17.933 17.2559 18.0893C17.0996 18.2455 16.8877 18.3333 16.6667 18.3333H3.33333C3.11232 18.3333 2.90036 18.2455 2.74408 18.0893C2.5878 17.933 2.5 17.721 2.5 17.5V9.16667C2.5 8.94566 2.5878 8.7337 2.74408 8.57742C2.90036 8.42114 3.11232 8.33334 3.33333 8.33334H4.16667V7.50001C4.16667 6.73396 4.31755 5.97542 4.6107 5.26769C4.90386 4.55995 5.33354 3.91689 5.87521 3.37522C6.41689 2.83354 7.05995 2.40386 7.76768 2.11071C8.47541 1.81756 9.23396 1.66667 10 1.66667C10.766 1.66667 11.5246 1.81756 12.2323 2.11071C12.9401 2.40386 13.5831 2.83354 14.1248 3.37522C14.6665 3.91689 15.0961 4.55995 15.3893 5.26769C15.6825 5.97542 15.8333 6.73396 15.8333 7.50001V8.33334ZM4.16667 10V16.6667H15.8333V10H4.16667ZM9.16667 11.6667H10.8333V15H9.16667V11.6667ZM14.1667 8.33334V7.50001C14.1667 6.39494 13.7277 5.33513 12.9463 4.55373C12.1649 3.77233 11.1051 3.33334 10 3.33334C8.89493 3.33334 7.83512 3.77233 7.05372 4.55373C6.27232 5.33513 5.83333 6.39494 5.83333 7.50001V8.33334H14.1667Z" fill="currentColor" style="fill:white;fill-opacity:1;"/>
|
|
3
|
-
</svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { MantineProvider } from './MantineProvider'
|