@kommo-crm/crm-react-ui-kit 1.4.0 → 1.5.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.
package/README.md
CHANGED
|
@@ -50,6 +50,12 @@ yarn test:e2e
|
|
|
50
50
|
yarn test:e2e:update-snapshots
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
**Generate screenshots with grep filter:**
|
|
54
|
+
|
|
55
|
+
```sh
|
|
56
|
+
yarn test:e2e:update-snapshots -g button
|
|
57
|
+
```
|
|
58
|
+
|
|
53
59
|
## Contribute to this repo
|
|
54
60
|
|
|
55
61
|
Pull requests are welcome. See the [contribution guidelines](./.github/CONTRIBUTING.md) for more information.
|
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _buttonShakeAnimation_v4l12_1{0%,to{transform:translate(0)}25%,75%{transform:translate(-10px)}50%{transform:translate(10px)}}._button_v4l12_17{z-index:var(--crm-ui-kit-button-z-index);height:var(--crm-ui-kit-button-height);padding:var(--crm-ui-kit-button-padding);font-size:var(--crm-ui-kit-button-font-size);font-weight:var(--crm-ui-kit-button-font-weight);line-height:var(--crm-ui-kit-button-line-height);white-space:nowrap;text-decoration:none;vertical-align:middle;color:var(--crm-ui-kit-button-color);border-width:var(--crm-ui-kit-button-border-width);border-radius:var(--crm-ui-kit-button-border-radius);border-color:var(--crm-ui-kit-button-border-color);border-style:var(--crm-ui-kit-button-border-style);background:var(--crm-ui-kit-button-background-color);outline:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}._button_v4l12_17+._button_v4l12_17{margin-left:var(--crm-ui-kit-button-sibling-element-spacing)}._button_v4l12_17:not(._disabled_v4l12_43):active{transform:translateY(1px)}._button_v4l12_17:not(._disabled_v4l12_43):hover{color:var(--crm-ui-kit-button-hover-color);background:var(--crm-ui-kit-button-hover-background-color);border-width:var(--crm-ui-kit-button-hover-border-width);border-radius:var(--crm-ui-kit-button-hover-border-radius);border-color:var(--crm-ui-kit-button-hover-border-color);border-style:var(--crm-ui-kit-button-hover-border-style)}._disabled_v4l12_43{color:var(--crm-ui-kit-button-disabled-color);background:var(--crm-ui-kit-button-disabled-background-color);border-color:var(--crm-ui-kit-button-disabled-border-color);opacity:var(--crm-ui-kit-button-disabled-opacity);cursor:default}._content_v4l12_65{display:flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center;text-align:center}._before_v4l12_74{display:inline-flex;margin-right:var(--crm-ui-kit-button-elements-spacing)}._after_v4l12_79{display:inline-flex;margin-left:var(--crm-ui-kit-button-elements-spacing)}._invisible_v4l12_84{visibility:hidden}._invalid_v4l12_88{animation:.3s _buttonShakeAnimation_v4l12_1;animation-fill-mode:both}._loading_v4l12_93 ._content_v4l12_65,._success_v4l12_94 ._content_v4l12_65{display:inline-grid}._loading_v4l12_93 ._content_v4l12_65>*,._success_v4l12_94 ._content_v4l12_65>*{grid-area:1 / 1;display:flex;align-items:center;justify-content:center}._success_v4l12_94{color:var(--crm-ui-kit-button-success-color);background:var(--crm-ui-kit-button-success-background-color);border-color:var(--crm-ui-kit-button-success-border-color)}._success_v4l12_94:not(._disabled_v4l12_43):hover{background:var(--crm-ui-kit-button-success-hover-background-color);border-color:var(--crm-ui-kit-button-success-border-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4BlD,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4BlD,eAAO,MAAM,MAAM,oGA+EjB,CAAC"}
|
|
@@ -1,94 +1,87 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as p, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import R, { forwardRef as T, useMemo as A } from "react";
|
|
3
3
|
import { c as i } from "../../index-L8X2o7IH.mjs";
|
|
4
|
-
import { useThemeClassName as
|
|
5
|
-
import { noop as
|
|
6
|
-
import { Spinner as
|
|
7
|
-
import { useShowInvalidAnimation as
|
|
8
|
-
import { useShowSuccessfulState as
|
|
9
|
-
import '../../assets/Button.css';const
|
|
10
|
-
button:
|
|
11
|
-
disabled:
|
|
12
|
-
content:
|
|
4
|
+
import { useThemeClassName as j } from "../../hooks/useThemeClassName/useThemeClassName.js";
|
|
5
|
+
import { noop as z } from "../../utils/noop/noop.js";
|
|
6
|
+
import { Spinner as B } from "../Spinner/Spinner.js";
|
|
7
|
+
import { useShowInvalidAnimation as D } from "./hooks/useShowInvalidAnimation/useShowInvalidAnimation.js";
|
|
8
|
+
import { useShowSuccessfulState as M } from "./hooks/useShowSuccessfulState/useShowSuccessfulState.js";
|
|
9
|
+
import '../../assets/Button.css';const F = "_button_v4l12_17", L = "_disabled_v4l12_43", V = "_content_v4l12_65", W = "_before_v4l12_74", q = "_after_v4l12_79", E = "_invisible_v4l12_84", G = "_invalid_v4l12_88", H = "_loading_v4l12_93", J = "_success_v4l12_94", e = {
|
|
10
|
+
button: F,
|
|
11
|
+
disabled: L,
|
|
12
|
+
content: V,
|
|
13
13
|
before: W,
|
|
14
14
|
after: q,
|
|
15
|
-
|
|
15
|
+
invisible: E,
|
|
16
16
|
invalid: G,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"--crm-ui-kit-spinner-border-
|
|
22
|
-
"--crm-ui-kit-spinner-
|
|
23
|
-
"--crm-ui-kit-spinner-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
loading: H,
|
|
18
|
+
success: J
|
|
19
|
+
}, K = (s) => {
|
|
20
|
+
const t = {
|
|
21
|
+
"--crm-ui-kit-spinner-border-color": s["--crm-ui-kit-button-spinner-border-color"],
|
|
22
|
+
"--crm-ui-kit-spinner-border-width": s["--crm-ui-kit-button-spinner-border-width"],
|
|
23
|
+
"--crm-ui-kit-spinner-circle-size": s["--crm-ui-kit-button-spinner-circle-size"],
|
|
24
|
+
"--crm-ui-kit-spinner-border-style": s["--crm-ui-kit-button-spinner-border-style"]
|
|
25
|
+
}, c = {
|
|
26
|
+
...t,
|
|
27
|
+
"--crm-ui-kit-spinner-border-color": s["--crm-ui-kit-button-spinner-disabled-border-color"]
|
|
27
28
|
};
|
|
28
|
-
return { defaultTheme:
|
|
29
|
-
},
|
|
29
|
+
return { defaultTheme: t, disabledTheme: c };
|
|
30
|
+
}, O = T((s, t) => {
|
|
30
31
|
const {
|
|
31
|
-
className:
|
|
32
|
-
type:
|
|
33
|
-
onClick:
|
|
34
|
-
theme:
|
|
35
|
-
isLoading:
|
|
32
|
+
className: c = "",
|
|
33
|
+
type: f = "button",
|
|
34
|
+
onClick: _ = z,
|
|
35
|
+
theme: l,
|
|
36
|
+
isLoading: o,
|
|
36
37
|
isDisabled: a,
|
|
37
38
|
before: d,
|
|
38
|
-
after:
|
|
39
|
-
children:
|
|
40
|
-
showInvalidAnimationRef:
|
|
39
|
+
after: m,
|
|
40
|
+
children: h,
|
|
41
|
+
showInvalidAnimationRef: v,
|
|
41
42
|
showSuccessfulStateRef: k,
|
|
42
|
-
successfulStateText:
|
|
43
|
-
isClickableWhileDisabled:
|
|
44
|
-
...
|
|
45
|
-
} =
|
|
46
|
-
|
|
47
|
-
),
|
|
43
|
+
successfulStateText: S,
|
|
44
|
+
isClickableWhileDisabled: w = !1,
|
|
45
|
+
...N
|
|
46
|
+
} = s, C = j(l), u = A(() => K(l), [l]), g = D(
|
|
47
|
+
v
|
|
48
|
+
), r = M(
|
|
48
49
|
k
|
|
49
|
-
),
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
case l:
|
|
58
|
-
s = /* @__PURE__ */ e("span", { className: i(n.spinner_container), children: /* @__PURE__ */ e(
|
|
59
|
-
z,
|
|
60
|
-
{
|
|
61
|
-
theme: a ? m.disabledTheme : m.defaultTheme,
|
|
62
|
-
isCentered: !0
|
|
63
|
-
}
|
|
64
|
-
) });
|
|
65
|
-
break;
|
|
66
|
-
default:
|
|
67
|
-
s = /* @__PURE__ */ R(T.Fragment, { children: [
|
|
68
|
-
d && /* @__PURE__ */ e("span", { className: i(n.before), children: d }),
|
|
69
|
-
/* @__PURE__ */ e("span", { children: _ }),
|
|
70
|
-
u && /* @__PURE__ */ e("span", { className: i(n.after), children: u })
|
|
71
|
-
] });
|
|
72
|
-
break;
|
|
73
|
-
}
|
|
74
|
-
return /* @__PURE__ */ e(
|
|
50
|
+
), x = (I) => {
|
|
51
|
+
o || _(I);
|
|
52
|
+
}, b = /* @__PURE__ */ p(R.Fragment, { children: [
|
|
53
|
+
d && /* @__PURE__ */ n("span", { className: i(e.before), children: d }),
|
|
54
|
+
/* @__PURE__ */ n("span", { children: h }),
|
|
55
|
+
m && /* @__PURE__ */ n("span", { className: i(e.after), children: m })
|
|
56
|
+
] }), y = !o && !r;
|
|
57
|
+
return /* @__PURE__ */ n(
|
|
75
58
|
"button",
|
|
76
59
|
{
|
|
77
|
-
...
|
|
78
|
-
ref:
|
|
79
|
-
type:
|
|
80
|
-
onClick:
|
|
81
|
-
className: i(
|
|
82
|
-
[
|
|
83
|
-
[
|
|
84
|
-
[
|
|
60
|
+
...N,
|
|
61
|
+
ref: t,
|
|
62
|
+
type: f,
|
|
63
|
+
onClick: x,
|
|
64
|
+
className: i(e.button, C, c, {
|
|
65
|
+
[e.invalid]: g,
|
|
66
|
+
[e.loading]: o,
|
|
67
|
+
[e.success]: r,
|
|
68
|
+
[e.disabled]: a
|
|
85
69
|
}),
|
|
86
|
-
disabled: a && !
|
|
87
|
-
children: /* @__PURE__ */
|
|
70
|
+
disabled: a && !w,
|
|
71
|
+
children: /* @__PURE__ */ p("span", { className: i(e.content), children: [
|
|
72
|
+
r && /* @__PURE__ */ n("span", { children: S }),
|
|
73
|
+
o && !r && /* @__PURE__ */ n(
|
|
74
|
+
B,
|
|
75
|
+
{
|
|
76
|
+
theme: a ? u.disabledTheme : u.defaultTheme
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
y ? b : /* @__PURE__ */ n("span", { className: i(e.invisible), children: b })
|
|
80
|
+
] })
|
|
88
81
|
}
|
|
89
82
|
);
|
|
90
83
|
});
|
|
91
|
-
|
|
84
|
+
O.displayName = "Button";
|
|
92
85
|
export {
|
|
93
|
-
|
|
86
|
+
O as Button
|
|
94
87
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kommo-crm/crm-react-ui-kit",
|
|
3
3
|
"description": "Ready-to-use React components which implements Kommo design",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.5.0",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"engines": {
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
"docker:clear-playwright-cache": "./scripts/generate_env.docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm crm-react-ui-kit_playwright_cache",
|
|
134
134
|
"test": "jest --maxWorkers 2",
|
|
135
135
|
"test:e2e": "./scripts/generate_env.docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
|
|
136
|
-
"test:e2e:update-snapshots": "./scripts/generate_env.docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
|
|
136
|
+
"test:e2e:update-snapshots": "sh -c './scripts/generate_env.docker.sh -u \"$@\" && docker compose --env-file=./.env.docker up --abort-on-container-exit' --",
|
|
137
137
|
"test:e2e:ci": "playwright test --config playwright-ct.config.ts",
|
|
138
138
|
"eslint": "eslint --quiet",
|
|
139
139
|
"tslint": "tsc --noEmit -p tsconfig.build.json",
|
|
@@ -158,6 +158,7 @@
|
|
|
158
158
|
"@testing-library/user-event": "14.5.2",
|
|
159
159
|
"@types/css": "0.0.38",
|
|
160
160
|
"@types/glob": "8.1.0",
|
|
161
|
+
"@types/hash-sum": "1.0.2",
|
|
161
162
|
"@types/jest": "29.5.12",
|
|
162
163
|
"@types/nanoid": "3.0.0",
|
|
163
164
|
"@types/react": "18",
|
|
@@ -177,6 +178,7 @@
|
|
|
177
178
|
"eslint-plugin-react": "7.37.1",
|
|
178
179
|
"eslint-plugin-react-hooks": "4.6.2",
|
|
179
180
|
"globals": "15.9.0",
|
|
181
|
+
"hash-sum": "2.0.0",
|
|
180
182
|
"husky": "9.1.7",
|
|
181
183
|
"jest": "29.7.0",
|
|
182
184
|
"jest-css-modules-transform": "4.4.2",
|
|
@@ -221,4 +223,4 @@
|
|
|
221
223
|
"react-dom": "^18.0"
|
|
222
224
|
},
|
|
223
225
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
224
|
-
}
|
|
226
|
+
}
|