allaw-ui 0.1.28 → 0.1.30
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/components/atoms/inputs/TextArea.css +199 -0
- package/dist/components/atoms/inputs/TextArea.d.ts +22 -0
- package/dist/components/atoms/inputs/TextArea.js +79 -0
- package/dist/components/atoms/inputs/index.d.ts +2 -0
- package/dist/components/atoms/inputs/index.js +1 -0
- package/dist/components/atoms/progressBars/ProgressBar.js +2 -2
- package/dist/components/molecules/stepper/Stepper.d.ts +4 -1
- package/dist/components/molecules/stepper/Stepper.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
@import "../../../styles/colors.css";
|
|
2
|
+
|
|
3
|
+
/* Style commun */
|
|
4
|
+
.text-area {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: 8px;
|
|
8
|
+
field-sizing: content;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.text-area-title-container {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.text-area-required {
|
|
17
|
+
color: var(--dark-grey, #456073);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.text-area-placeholder {
|
|
21
|
+
color: var(--Tags-Mid-grey, rgba(114, 142, 167, 1));
|
|
22
|
+
font-family: "Open Sans";
|
|
23
|
+
font-size: 14px;
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
line-height: normal;
|
|
27
|
+
opacity: 0.8;
|
|
28
|
+
width: 100%;
|
|
29
|
+
padding-left: 4px;
|
|
30
|
+
resize: vertical;
|
|
31
|
+
min-height: 100px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Style default */
|
|
35
|
+
.text-area-default {
|
|
36
|
+
display: flex;
|
|
37
|
+
width: 100%;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
align-items: flex-start;
|
|
41
|
+
gap: 11px;
|
|
42
|
+
field-sizing: content;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.text-area-default .text-area-container {
|
|
46
|
+
display: flex;
|
|
47
|
+
width: 100%;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text-area-default .text-area-input {
|
|
54
|
+
display: flex;
|
|
55
|
+
width: 100%;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
border-radius: 8px;
|
|
59
|
+
border: 3px solid var(--grey-venom, #e6edf5);
|
|
60
|
+
background: var(--Primary-Blanc, #fff);
|
|
61
|
+
padding: 10px;
|
|
62
|
+
field-sizing: content;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.text-area-default .text-area-input:hover {
|
|
66
|
+
border-color: var(--venom-grey-dark, #d1dce8);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.text-area-default .text-area-input:focus-within {
|
|
70
|
+
border-color: var(--mid-grey, #728ea7);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.text-area-default .text-area-input textarea {
|
|
74
|
+
width: 100%;
|
|
75
|
+
border: none;
|
|
76
|
+
outline: none;
|
|
77
|
+
color: var(--noir);
|
|
78
|
+
field-sizing: content;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Style variation */
|
|
82
|
+
.text-area-variation {
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 100%;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
align-items: flex-start;
|
|
88
|
+
gap: 11px;
|
|
89
|
+
field-sizing: content;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.text-area-variation .text-area-container {
|
|
93
|
+
display: flex;
|
|
94
|
+
width: 100%;
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.text-area-variation .text-area-input {
|
|
101
|
+
display: flex;
|
|
102
|
+
flex: 1;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
align-items: flex-start;
|
|
105
|
+
border-radius: 8px;
|
|
106
|
+
border: 1px solid rgba(114, 142, 167, 1);
|
|
107
|
+
background: var(--Primary-Blanc, #fff);
|
|
108
|
+
padding: 10px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.text-area-variation .text-area-input textarea {
|
|
112
|
+
width: 100%;
|
|
113
|
+
border: none;
|
|
114
|
+
outline: none;
|
|
115
|
+
color: var(--noir);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.text-area-variation .text-area-icon-button {
|
|
119
|
+
display: flex;
|
|
120
|
+
width: 40px;
|
|
121
|
+
height: 40px;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
align-items: center;
|
|
124
|
+
border-radius: 4px;
|
|
125
|
+
background: var(--Primary-Light-grey, #f4f7fb);
|
|
126
|
+
border: none;
|
|
127
|
+
margin-left: 8px;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.text-area-variation .text-area-icon-button:hover {
|
|
132
|
+
background: rgba(0, 0, 0, 0.1);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.text-area-variation .text-area-icon-button i {
|
|
136
|
+
width: 19px;
|
|
137
|
+
height: 19px;
|
|
138
|
+
flex-shrink: 0;
|
|
139
|
+
color: var(--dark-grey, #f4f7fb);
|
|
140
|
+
font-size: 18px;
|
|
141
|
+
padding-left: 2px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Style password */
|
|
145
|
+
.text-area-password {
|
|
146
|
+
display: flex;
|
|
147
|
+
width: 100%;
|
|
148
|
+
flex-direction: column;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
align-items: flex-start;
|
|
151
|
+
gap: 11px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.text-area-password .text-area-container {
|
|
155
|
+
display: flex;
|
|
156
|
+
width: 100%;
|
|
157
|
+
flex-direction: row;
|
|
158
|
+
justify-content: space-between;
|
|
159
|
+
align-items: center;
|
|
160
|
+
border-radius: 8px;
|
|
161
|
+
border: 1px solid rgba(114, 142, 167, 1);
|
|
162
|
+
background: var(--Primary-Blanc, #fff);
|
|
163
|
+
padding: 10px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.text-area-password .text-area-input {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex: 1;
|
|
169
|
+
flex-direction: column;
|
|
170
|
+
align-items: flex-start;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.text-area-password .text-area-input textarea {
|
|
174
|
+
width: 100%;
|
|
175
|
+
border: none;
|
|
176
|
+
outline: none;
|
|
177
|
+
color: var(--noir);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.text-area-password .text-area-button {
|
|
181
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
182
|
+
font-family: "Open Sans";
|
|
183
|
+
font-size: 12px;
|
|
184
|
+
font-style: normal;
|
|
185
|
+
font-weight: 600;
|
|
186
|
+
line-height: normal;
|
|
187
|
+
background: none;
|
|
188
|
+
border: none;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.text-area-error {
|
|
193
|
+
margin-top: 4px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.error-message {
|
|
197
|
+
padding-top: 4px;
|
|
198
|
+
padding-left: 14px;
|
|
199
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./TextArea.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
import { commonRegex } from "../../../utils/regex";
|
|
6
|
+
export interface TextAreaProps {
|
|
7
|
+
title: string;
|
|
8
|
+
style?: "default" | "variation" | "password";
|
|
9
|
+
placeholder: string;
|
|
10
|
+
endIcon?: string;
|
|
11
|
+
isRequired?: boolean;
|
|
12
|
+
validate?: RegExp | keyof typeof commonRegex;
|
|
13
|
+
onError?: (error: string) => void;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
value?: string;
|
|
16
|
+
error?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface TextAreaRef {
|
|
19
|
+
validate: () => boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
|
|
22
|
+
export default TextArea;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
// TextArea.tsx
|
|
2
|
+
import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
|
|
3
|
+
import "./TextArea.css";
|
|
4
|
+
import "../../../styles/global.css";
|
|
5
|
+
import "../../../styles/icons.css";
|
|
6
|
+
import { commonRegex } from "../../../utils/regex";
|
|
7
|
+
import TinyInfo from "../typography/TinyInfo";
|
|
8
|
+
import Paragraph from "../typography/Paragraph";
|
|
9
|
+
var TextArea = forwardRef(function (_a, ref) {
|
|
10
|
+
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error;
|
|
11
|
+
var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[1];
|
|
12
|
+
var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
|
|
13
|
+
var _f = useState(propError || ""), error = _f[0], setError = _f[1];
|
|
14
|
+
var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
|
|
15
|
+
var textareaRef = useRef(null);
|
|
16
|
+
useEffect(function () {
|
|
17
|
+
setValue(propValue || "");
|
|
18
|
+
}, [propValue]);
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
setError(propError || "");
|
|
21
|
+
}, [propError]);
|
|
22
|
+
var validateTextArea = useCallback(function () {
|
|
23
|
+
var _a;
|
|
24
|
+
var currentValue = ((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) || value;
|
|
25
|
+
var errorMessage = "";
|
|
26
|
+
if (isRequired && currentValue.trim() === "") {
|
|
27
|
+
errorMessage = "Ce champ est requis";
|
|
28
|
+
}
|
|
29
|
+
else if (validate && currentValue) {
|
|
30
|
+
var regex = typeof validate === "string" ? commonRegex[validate] : validate;
|
|
31
|
+
if (!regex.test(currentValue)) {
|
|
32
|
+
errorMessage = "Veuillez vérifier votre saisie";
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
setError(errorMessage);
|
|
36
|
+
setIsTouched(true);
|
|
37
|
+
onError === null || onError === void 0 ? void 0 : onError(errorMessage);
|
|
38
|
+
return !errorMessage;
|
|
39
|
+
}, [isRequired, value, validate, onError]);
|
|
40
|
+
useImperativeHandle(ref, function () { return ({
|
|
41
|
+
validate: validateTextArea,
|
|
42
|
+
}); });
|
|
43
|
+
var handleChange = function (e) {
|
|
44
|
+
var newValue = e.target.value;
|
|
45
|
+
setValue(newValue);
|
|
46
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
47
|
+
if (isTouched) {
|
|
48
|
+
validateTextArea();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var handleBlur = function () {
|
|
52
|
+
setIsTouched(true);
|
|
53
|
+
validateTextArea();
|
|
54
|
+
};
|
|
55
|
+
var renderEndIcon = function () {
|
|
56
|
+
if (style === "variation" && endIcon) {
|
|
57
|
+
return (React.createElement("button", { className: "text-area-icon-button" },
|
|
58
|
+
React.createElement("i", { className: endIcon })));
|
|
59
|
+
}
|
|
60
|
+
if (style === "password") {
|
|
61
|
+
return (React.createElement("button", { className: "text-area-button", onClick: function () { return setIsPasswordVisible(!isPasswordVisible); } }, isPasswordVisible ? "CACHER" : "AFFICHER"));
|
|
62
|
+
}
|
|
63
|
+
return null;
|
|
64
|
+
};
|
|
65
|
+
return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
|
|
66
|
+
React.createElement("div", { className: "text-area-title-container" },
|
|
67
|
+
React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
|
|
68
|
+
isRequired && title && (React.createElement("span", { className: "text-area-required" },
|
|
69
|
+
"\u00A0",
|
|
70
|
+
"*"))),
|
|
71
|
+
React.createElement("div", { className: "text-area-container" },
|
|
72
|
+
React.createElement("div", { className: "text-area-input ".concat(style === "password" ? "text-area-password-input" : "") },
|
|
73
|
+
React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
|
|
74
|
+
renderEndIcon(),
|
|
75
|
+
error && isTouched && (React.createElement("div", { className: "error-message" },
|
|
76
|
+
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
|
|
77
|
+
});
|
|
78
|
+
TextArea.displayName = "TextArea";
|
|
79
|
+
export default TextArea;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as Input } from "./Input";
|
|
2
|
+
export { default as TextArea } from "./TextArea";
|
|
2
3
|
export { default as SearchBar } from "./SearchBar";
|
|
3
4
|
export type { InputProps, InputRef } from "./Input";
|
|
4
5
|
export type { SearchBarProps } from "./SearchBar";
|
|
6
|
+
export type { TextAreaProps, TextAreaRef } from "./TextArea";
|
|
@@ -4,8 +4,8 @@ import "../../../styles/global.css";
|
|
|
4
4
|
import "../../../styles/icons.css";
|
|
5
5
|
var ProgressBar = function (_a) {
|
|
6
6
|
var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d;
|
|
7
|
-
var constrainedCurrentStep = Math.max(
|
|
8
|
-
var progressWidth =
|
|
7
|
+
var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
|
|
8
|
+
var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
|
|
9
9
|
return (React.createElement("div", { className: "progress-bar-container" },
|
|
10
10
|
startIcon && currentStep > 1 && (React.createElement("div", { className: "progress-bar-icon-container" },
|
|
11
11
|
React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
|
|
@@ -11,7 +11,10 @@ export interface StepperProps {
|
|
|
11
11
|
secondaryButton?: {
|
|
12
12
|
show: boolean;
|
|
13
13
|
label: string;
|
|
14
|
-
|
|
14
|
+
startIcon?: React.ReactNode;
|
|
15
|
+
endIcon?: React.ReactNode;
|
|
16
|
+
startIconName?: string;
|
|
17
|
+
endIconName?: string;
|
|
15
18
|
onSecondaryButtonClick?: (step: number) => void;
|
|
16
19
|
}[];
|
|
17
20
|
primaryButton?: {
|
|
@@ -113,7 +113,7 @@ var Stepper = function (_a) {
|
|
|
113
113
|
React.createElement("div", { className: "stepper-content" }, children[step - 1]),
|
|
114
114
|
React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) ? "no-buttons" : "") },
|
|
115
115
|
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
|
|
116
|
-
React.createElement(SecondaryButton, { label: currentSecondaryButton.label, startIcon: currentSecondaryButton.
|
|
116
|
+
React.createElement(SecondaryButton, { label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); } }))),
|
|
117
117
|
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
|
|
118
118
|
React.createElement(PrimaryButton, { label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, onClick: handleNext })))))));
|
|
119
119
|
return portalContainerRef.current && isVisible
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
|
|
|
13
13
|
export { default as Fitler } from "./components/atoms/filter/Filter";
|
|
14
14
|
export { default as Input } from "./components/atoms/inputs/Input";
|
|
15
15
|
export type { InputProps, InputRef } from "./components/atoms/inputs/Input";
|
|
16
|
+
export { default as TextArea } from "./components/atoms/inputs/TextArea";
|
|
17
|
+
export type { TextAreaProps, TextAreaRef, } from "./components/atoms/inputs/TextArea";
|
|
16
18
|
export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
|
|
17
19
|
export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
|
|
18
20
|
export { default as RadioButton } from "./components/atoms/radios/RadioButton";
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
|
|
|
17
17
|
export { default as Fitler } from "./components/atoms/filter/Filter";
|
|
18
18
|
// Inputs
|
|
19
19
|
export { default as Input } from "./components/atoms/inputs/Input";
|
|
20
|
+
export { default as TextArea } from "./components/atoms/inputs/TextArea";
|
|
20
21
|
export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
|
|
21
22
|
// Progress Bars
|
|
22
23
|
export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
|