@kvell-group/ui 1.9.2 → 1.10.0

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 (16) hide show
  1. package/README.md +1 -193
  2. package/dist/Text.module-D3VLOIGk.js +8 -0
  3. package/dist/assets/CardInput.css +1 -1
  4. package/dist/assets/Input.css +1 -0
  5. package/dist/assets/Text.css +1 -1
  6. package/dist/clsx-OuTLNxxd.js +16 -0
  7. package/dist/components/CardInput/CardInput.js +459 -499
  8. package/dist/components/Input/Input.d.ts +1 -0
  9. package/dist/components/Input/Input.js +11 -0
  10. package/dist/components/Input/index.d.ts +1 -0
  11. package/dist/components/Input/index.js +4 -0
  12. package/dist/components/Text/Text.js +1 -1
  13. package/dist/main.d.ts +1 -0
  14. package/dist/main.js +6 -4
  15. package/package.json +3 -3
  16. package/dist/Text.module-R-XLggXY.js +0 -8
package/README.md CHANGED
@@ -1,193 +1 @@
1
- # система коммитов:
2
-
3
- ## Фикс
4
-
5
- текст коммита: fix: описание
6
-
7
- изменит версию библиотеки from x.y.z => x.y.z + 1
8
-
9
- ## Новый функционал
10
-
11
- текст коммита: feat: description
12
-
13
- изменит версию библиотеки x.y.z => x.y + 1.z
14
-
15
- ```tsx
16
- import { TestButton } from '@kvell-group/ui'
17
- ```
18
-
19
- # Добавление контекста (обязательно)
20
-
21
- ## Добавление контекста в Next-js проект c использованием page router
22
-
23
- ```tsx
24
- // MantineContext.tsx
25
- import { ReactNode } from 'react'
26
-
27
- import { MantineProvider, theme } from '@kvell-group/ui'
28
-
29
- type MantineContextProps = { children: ReactNode }
30
-
31
- export const MantineContext = ({ children }: MantineContextProps) => (
32
- <MantineProvider theme={theme}>{children}</MantineProvider>
33
- )
34
- ```
35
-
36
- ```tsx
37
- //app.tsx
38
- import { MantineContext } from '@/client/contexts/MantineContext'
39
- //...
40
- import '@mantine/core/styles.layer.css'
41
- //...
42
-
43
- const App = () => {
44
- //...
45
- return <MantineContext>{getLayout(<Component {...pageProps} />, pageProps)}</MantineContext>
46
- }
47
- ```
48
-
49
- ```tsx
50
- //_document.tsx
51
- import { ColorSchemeScript, mantineHtmlProps } from '@kvell-group/ui'
52
-
53
- class MyDocument extends Document {
54
- //...
55
- render() {
56
- return (
57
- <Html {...mantineHtmlProps}>
58
- <Head>
59
- {/*... */}
60
- <ColorSchemeScript defaultColorScheme='auto' />
61
- {/*... */}
62
- </Head>
63
- </Html>
64
- )
65
- }
66
- }
67
- ```
68
-
69
- добавить в файл конфигурации
70
-
71
- ```js
72
- const nextConfigBase = {
73
- //...
74
- // compiler: {
75
- // styledComponents: true,
76
- // },
77
- transpilePackages: ['@kvell-group/ui'],
78
- //...
79
- }
80
- ```
81
-
82
- # использование компонентов
83
-
84
- ## Button
85
-
86
- варианты:
87
-
88
- - primary
89
- - secondary
90
- - tertiary
91
-
92
- Текст кнопки имеет Caption L/Medium класс по умолчанию. Чтобы добавить текст другого стиля можно использовать компонент Typography
93
-
94
- ```jsx
95
- <Button>
96
- <TypographyBodySMedium>текст кнопки</TypographyBodySMedium>
97
- </Button>
98
- ```
99
-
100
- ## Typography
101
-
102
- Оборачивает компонент Text. Что бы создать компонент:
103
-
104
- - найти соответствующие переменные в blank (файл от дизайна)
105
-
106
- ```css
107
- :root {
108
- --typography-size-body-s: 16px;
109
- --typography-line-height-body-s: 24px;
110
- --typography-letter-spacing-body-s: -0.20000000298023224px;
111
- }
112
- ```
113
-
114
- - добавить переменные в тему
115
-
116
- ```ts
117
- const theme = {
118
- //
119
- spacing: {
120
- //blank variables
121
- 'body-s': ' -0.20000000298023224px',
122
- },
123
- fontSizes: {
124
- //blank variables
125
- 'body-s-medium': '16px',
126
- },
127
- lineHeights: {
128
- //blank variables
129
- 'body-s': '24px',
130
- },
131
- }
132
- ```
133
-
134
- - использовать их в стилях
135
-
136
- ```css
137
- /* Text.module.css */
138
- .body-s {
139
- font-family: var(--mantine-font-family);
140
- font-weight: 500;
141
- font-size: var(--mantine-font-size-body-s-medium);
142
- line-height: var(--mantine-line-height-body-s);
143
- letter-spacing: var(--mantine-letter-spacing-body-s);
144
- }
145
- ```
146
-
147
- - добавить в типизацию
148
-
149
- ```tsx
150
- //Text.tsx
151
- import { TextProps as TextBaseProps } from '@mantine/core'
152
- import { Text as TextBase } from '@mantine/core'
153
- import { ReactNode } from 'react'
154
-
155
- import classesNames from '@/components/Text/Text.module.css'
156
-
157
- // ----------------------------------------------------------------------
158
-
159
- type TextVariants =
160
- | TextBaseProps['variant']
161
- // ....
162
- | 'body-s-medium'
163
-
164
- export type TextProps = Omit<TextBaseProps, 'variant'> & {
165
- children: ReactNode
166
- variant: TextVariants
167
- }
168
-
169
- export const Text = (props: TextProps) => (
170
- <TextBase
171
- {...props}
172
- classNames={{ root: classesNames[props.variant || 'text'] }}
173
- />
174
- )
175
- ```
176
-
177
- # расширение типизации компонентов
178
-
179
- [ссылка на источник](https://mantine.dev/styles/variants-sizes/#custom-variants-types)
180
-
181
- ```ts
182
- // mantine.d.ts
183
-
184
- import { ButtonVariant } from '@mantine/core'
185
-
186
- type ExtendedButtonVariant = ButtonVariant | 'primary' | 'secondary' | 'tertiary'
187
-
188
- declare module '@mantine/core' {
189
- export interface ButtonProps {
190
- variant?: ExtendedButtonVariant
191
- }
192
- }
193
- ```
1
+ # ui lib based on mantine and vite
package/dist/Text.module-D3VLOIGk.js ADDED
@@ -0,0 +1,8 @@
1
+ import './assets/Text.css';const a = {
2
+ "body-s-medium": "_body-s-medium_19522_2",
3
+ "caption-l-medium": "_caption-l-medium_19522_11",
4
+ "caption-l-regular": "_caption-l-regular_19522_19"
5
+ };
6
+ export {
7
+ a as c
8
+ };
package/dist/assets/CardInput.css CHANGED
@@ -1 +1 @@
1
- ._input_u23b9_1{border-radius:var(--mantine-radius-xl);border:1px solid var(--mantine-color-border-action-normal-0);color:var(--mantine-color-text-base-tertiary-0)}._section_u23b9_7[data-position=right]{padding-right:.25rem}
1
+ ._input_1uqnk_1{border-radius:var(--mantine-radius-xl);border:1px solid var(--mantine-color-border-action-normal-0);color:var(--mantine-color-text-base-tertiary-0)}._section_1uqnk_7[data-position=left]{padding-left:6px}._section_1uqnk_7[data-position=left]+input{padding-left:38px}._section_1uqnk_7[data-position=right]{margin-right:16px}
package/dist/assets/Input.css ADDED
@@ -0,0 +1 @@
1
+ ._input_huhi9_1{border-radius:var(--mantine-radius-xl);border:1px solid var(--mantine-color-border-action-normal-0);color:var(--mantine-color-text-base-tertiary-0);padding:18px 16px;box-shadow:var(--mantine-shadow-xs)}
package/dist/assets/Text.css CHANGED
@@ -1 +1 @@
1
- ._body-s-medium_ziqnx_2{font-family:var(--mantine-font-family);font-weight:500;font-size:var(--mantine-font-size-body-s-medium);line-height:var(--mantine-line-height-body-s);letter-spacing:var(--mantine-letter-spacing-body-s)}._caption-l-medium_ziqnx_11{font-family:var(--mantine-font-family);font-weight:500;font-size:var(--mantine-font-size-caption-l);line-height:var(--mantine-line-height-caption-l);letter-spacing:var(--mantine-letter-spacing-caption-l)}._caption-l-regular_ziqnx_19{font-family:var(--mantine-font-family);font-weight:500;font-size:var(--mantine-font-size-caption-l-regular);line-height:var(--mantine-line-height-caption-l);letter-spacing:var(--mantine-letter-spacing-caption-l)}
1
+ ._body-s-medium_19522_2{font-family:var(--mantine-font-family);font-weight:500;font-size:var(--mantine-font-size-body-s-medium);line-height:var(--mantine-line-height-body-s);letter-spacing:var(--mantine-letter-spacing-body-s)}._caption-l-medium_19522_11{font-family:var(--mantine-font-family);font-weight:500;font-size:var(--mantine-font-size-caption-l);line-height:var(--mantine-line-height-caption-l);letter-spacing:var(--mantine-letter-spacing-caption-l)}._caption-l-regular_19522_19{font-family:var(--mantine-font-family);font-weight:400;font-size:var(--mantine-font-size-caption-l-regular);line-height:var(--mantine-line-height-caption-l);letter-spacing:var(--mantine-letter-spacing-caption-l)}
package/dist/clsx-OuTLNxxd.js ADDED
@@ -0,0 +1,16 @@
1
+ function a(r) {
2
+ var f, n, t = "";
3
+ if (typeof r == "string" || typeof r == "number") t += r;
4
+ else if (typeof r == "object") if (Array.isArray(r)) {
5
+ var o = r.length;
6
+ for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
7
+ } else for (n in r) r[n] && (t && (t += " "), t += n);
8
+ return t;
9
+ }
10
+ function i() {
11
+ for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
12
+ return t;
13
+ }
14
+ export {
15
+ i as c
16
+ };