allaw-ui 0.0.347 → 0.0.351
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/buttons/ActionCircleButton.d.ts +9 -0
- package/dist/components/atoms/buttons/ActionCircleButton.js +23 -0
- package/dist/components/atoms/buttons/AgendaSlot.d.ts +10 -0
- package/dist/components/atoms/buttons/AgendaSlot.js +7 -0
- package/dist/components/atoms/buttons/FavoriteToggle.d.ts +8 -0
- package/dist/components/atoms/buttons/FavoriteToggle.js +11 -0
- package/dist/components/atoms/buttons/FilterButton.d.ts +9 -0
- package/dist/components/atoms/buttons/FilterButton.js +9 -0
- package/dist/components/atoms/buttons/FilterButtonPrimary.d.ts +9 -0
- package/dist/components/atoms/buttons/FilterButtonPrimary.js +46 -0
- package/dist/components/atoms/buttons/GhostButton.d.ts +14 -0
- package/dist/components/atoms/buttons/GhostButton.js +11 -0
- package/dist/components/atoms/buttons/IconButton.d.ts +10 -0
- package/dist/components/atoms/buttons/IconButton.js +14 -0
- package/dist/components/atoms/buttons/OAuthProviderButton.d.ts +12 -0
- package/dist/components/atoms/buttons/OAuthProviderButton.js +143 -0
- package/dist/components/atoms/buttons/PendingDocuments.d.ts +10 -0
- package/dist/components/atoms/buttons/PendingDocuments.js +13 -0
- package/dist/components/atoms/buttons/PrimaryButton.d.ts +16 -0
- package/dist/components/atoms/buttons/PrimaryButton.js +11 -0
- package/dist/components/atoms/buttons/SecondaryButton.d.ts +14 -0
- package/dist/components/atoms/buttons/SecondaryButton.js +11 -0
- package/dist/components/atoms/buttons/TabNavigation.d.ts +13 -0
- package/dist/components/atoms/buttons/TabNavigation.js +10 -0
- package/dist/components/atoms/buttons/TertiaryButton.d.ts +10 -0
- package/dist/components/atoms/buttons/TertiaryButton.js +10 -0
- package/dist/components/atoms/buttons/index.d.ts +22 -0
- package/dist/components/atoms/buttons/index.js +11 -0
- package/dist/components/atoms/checkboxes/Checkbox.d.ts +13 -0
- package/dist/components/atoms/checkboxes/Checkbox.js +19 -0
- package/dist/components/atoms/checkboxes/index.d.ts +2 -0
- package/dist/components/atoms/checkboxes/index.js +1 -0
- package/dist/components/atoms/filter/Filter.d.ts +17 -0
- package/dist/components/atoms/filter/Filter.js +70 -0
- package/dist/components/atoms/filter/index.d.ts +2 -0
- package/dist/components/atoms/filter/index.js +1 -0
- package/dist/components/atoms/inputs/Input.d.ts +22 -0
- package/dist/components/atoms/inputs/Input.js +86 -0
- package/dist/components/atoms/inputs/SearchBar.d.ts +12 -0
- package/dist/components/atoms/inputs/SearchBar.js +20 -0
- package/dist/components/atoms/inputs/index.d.ts +4 -0
- package/dist/components/atoms/inputs/index.js +2 -0
- package/dist/components/atoms/progressBars/ProgressBar.d.ts +15 -0
- package/dist/components/atoms/progressBars/ProgressBar.js +17 -0
- package/dist/components/atoms/progressBars/index.d.ts +2 -0
- package/dist/components/atoms/progressBars/index.js +1 -0
- package/dist/components/atoms/radios/RadioButton.d.ts +11 -0
- package/dist/components/atoms/radios/RadioButton.js +10 -0
- package/dist/components/atoms/radios/index.d.ts +2 -0
- package/dist/components/atoms/radios/index.js +1 -0
- package/dist/components/atoms/selects/Select.d.ts +24 -0
- package/dist/components/atoms/selects/Select.js +84 -0
- package/dist/components/atoms/selects/index.d.ts +2 -0
- package/dist/components/atoms/selects/index.js +1 -0
- package/dist/components/atoms/tags/AppointementStatusTag.d.ts +8 -0
- package/dist/components/atoms/tags/AppointementStatusTag.js +41 -0
- package/dist/components/atoms/tags/FolderStatusTag.d.ts +7 -0
- package/dist/components/atoms/tags/FolderStatusTag.js +8 -0
- package/dist/components/atoms/tags/OtherStatusTag.d.ts +10 -0
- package/dist/components/atoms/tags/OtherStatusTag.js +10 -0
- package/dist/components/atoms/tags/index.d.ts +6 -0
- package/dist/components/atoms/tags/index.js +3 -0
- package/dist/components/atoms/typography/Heading.d.ts +10 -0
- package/dist/components/atoms/typography/Heading.js +7 -0
- package/dist/components/atoms/typography/Paragraph.d.ts +12 -0
- package/dist/components/atoms/typography/Paragraph.js +24 -0
- package/dist/components/atoms/typography/SmallTitle.d.ts +9 -0
- package/dist/components/atoms/typography/SmallTitle.js +7 -0
- package/dist/components/atoms/typography/Subtitle.d.ts +9 -0
- package/dist/components/atoms/typography/Subtitle.js +7 -0
- package/dist/components/atoms/typography/TinyInfo.d.ts +12 -0
- package/dist/components/atoms/typography/TinyInfo.js +15 -0
- package/dist/components/atoms/typography/index.d.ts +10 -0
- package/dist/components/atoms/typography/index.js +5 -0
- package/dist/components/atoms/uiVariables/BorderRadius.d.ts +6 -0
- package/dist/components/atoms/uiVariables/BorderRadius.js +12 -0
- package/dist/components/atoms/uiVariables/Shadows.d.ts +6 -0
- package/dist/components/atoms/uiVariables/Shadows.js +11 -0
- package/dist/components/atoms/uiVariables/Strokes.d.ts +6 -0
- package/dist/components/atoms/uiVariables/Strokes.js +10 -0
- package/dist/components/atoms/uiVariables/index.d.ts +3 -0
- package/dist/components/atoms/uiVariables/index.js +3 -0
- package/dist/components/molecules/appointmentSlot/AppointmentSlot.d.ts +25 -0
- package/dist/components/molecules/appointmentSlot/AppointmentSlot.js +109 -0
- package/dist/components/molecules/appointmentSlot/index.d.ts +2 -0
- package/dist/components/molecules/appointmentSlot/index.js +1 -0
- package/dist/components/molecules/breadcrumb/Breadcrumb.d.ts +12 -0
- package/dist/components/molecules/breadcrumb/Breadcrumb.js +12 -0
- package/dist/components/molecules/breadcrumb/index.d.ts +2 -0
- package/dist/components/molecules/breadcrumb/index.js +1 -0
- package/dist/components/molecules/caseCard/CaseCard.d.ts +14 -0
- package/dist/components/molecules/caseCard/CaseCard.js +20 -0
- package/dist/components/molecules/caseCard/index.d.ts +2 -0
- package/dist/components/molecules/caseCard/index.js +1 -0
- package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts +16 -0
- package/dist/components/molecules/checkboxForm/CheckboxForm.js +24 -0
- package/dist/components/molecules/checkboxForm/index.d.ts +2 -0
- package/dist/components/molecules/checkboxForm/index.js +1 -0
- package/dist/components/molecules/contactCard/ContactCard.d.ts +17 -0
- package/dist/components/molecules/contactCard/ContactCard.js +80 -0
- package/dist/components/molecules/contactCard/index.d.ts +2 -0
- package/dist/components/molecules/contactCard/index.js +1 -0
- package/dist/components/molecules/documentCard/DocumentCard.d.ts +14 -0
- package/dist/components/molecules/documentCard/DocumentCard.js +59 -0
- package/dist/components/molecules/documentCard/index.d.ts +2 -0
- package/dist/components/molecules/documentCard/index.js +1 -0
- package/dist/components/molecules/employeeCard/EmployeeCard.d.ts +15 -0
- package/dist/components/molecules/employeeCard/EmployeeCard.js +34 -0
- package/dist/components/molecules/employeeCard/index.d.ts +2 -0
- package/dist/components/molecules/employeeCard/index.js +1 -0
- package/dist/components/molecules/proCard/ProCard.d.ts +13 -0
- package/dist/components/molecules/proCard/ProCard.js +25 -0
- package/dist/components/molecules/proCard/index.d.ts +2 -0
- package/dist/components/molecules/proCard/index.js +1 -0
- package/dist/components/molecules/stepper/Stepper.d.ts +27 -0
- package/dist/components/molecules/stepper/Stepper.js +68 -0
- package/dist/components/molecules/stepper/index.d.ts +2 -0
- package/dist/components/molecules/stepper/index.js +1 -0
- package/dist/index.d.ts +40 -0
- package/dist/index.js +59 -0
- package/dist/utils/regex.d.ts +5 -0
- package/dist/utils/regex.js +7 -0
- package/package.json +2 -1
- package/dist/tsconfig.tsbuildinfo +0 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import "./Basefiler.css";
|
|
24
|
+
import { FilterButtonPrimary, PrimaryButton } from "../buttons";
|
|
25
|
+
import { TinyInfo } from "../typography";
|
|
26
|
+
import React, { useState } from "react";
|
|
27
|
+
var BaseFilter = function (_a) {
|
|
28
|
+
var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
|
|
29
|
+
var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
|
|
30
|
+
var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
31
|
+
var handleClose = function () {
|
|
32
|
+
setFilter(selectedValue);
|
|
33
|
+
setIsOpen(false);
|
|
34
|
+
};
|
|
35
|
+
var handleButtonTap = function () {
|
|
36
|
+
isOpen ? handleClose() : setIsOpen(true);
|
|
37
|
+
};
|
|
38
|
+
var Item = function (_a) {
|
|
39
|
+
var name = _a.name, value = _a.value;
|
|
40
|
+
return (React.createElement("button", { className: "item", onClick: function () { setSelectedValue(value); handleClose(); } },
|
|
41
|
+
React.createElement("div", { className: "round" },
|
|
42
|
+
React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
|
|
43
|
+
React.createElement("span", null, name)));
|
|
44
|
+
};
|
|
45
|
+
var SmallItem = function (_a) {
|
|
46
|
+
var name = _a.name, value = _a.value;
|
|
47
|
+
return (React.createElement("button", { className: "smallItem", onClick: function () { setSelectedValue(value); } },
|
|
48
|
+
React.createElement("div", { className: "round" },
|
|
49
|
+
React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
|
|
50
|
+
React.createElement("span", null, name)));
|
|
51
|
+
};
|
|
52
|
+
return (React.createElement(React.Fragment, null,
|
|
53
|
+
React.createElement("div", __assign({ className: "baseFilter" }, props),
|
|
54
|
+
React.createElement(FilterButtonPrimary, { onClick: handleButtonTap, zIndex: "2000" },
|
|
55
|
+
children,
|
|
56
|
+
React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
|
|
57
|
+
isOpen && (React.createElement("div", { className: "options" }, filterData && filterData.length > 0 &&
|
|
58
|
+
filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
|
|
59
|
+
React.createElement("div", { className: "optionsSmall", style: { bottom: isOpen ? "0" : "-100%" } },
|
|
60
|
+
React.createElement("div", { className: "row" },
|
|
61
|
+
React.createElement("div", { style: { minWidth: "20px" } }),
|
|
62
|
+
React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
|
|
63
|
+
React.createElement("button", { className: "closeButton", onClick: handleClose },
|
|
64
|
+
React.createElement("i", { className: "allaw-icon-close" }))),
|
|
65
|
+
React.createElement("div", { className: "choices" }, filterData && filterData.length > 0 &&
|
|
66
|
+
filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
|
|
67
|
+
React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))),
|
|
68
|
+
isOpen && (React.createElement("div", { className: "backdrop", onClick: handleClose }))));
|
|
69
|
+
};
|
|
70
|
+
export default BaseFilter;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Filter } from "./Filter";
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Input.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
import { commonRegex } from "../../../utils/regex";
|
|
6
|
+
export interface InputProps {
|
|
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 InputRef {
|
|
19
|
+
validate: () => boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
|
|
22
|
+
export default Input;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
|
|
2
|
+
import "./Input.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
import { commonRegex } from "../../../utils/regex";
|
|
6
|
+
import TinyInfo from "../typography/TinyInfo";
|
|
7
|
+
import Paragraph from "../typography/Paragraph";
|
|
8
|
+
var Input = forwardRef(function (_a, ref) {
|
|
9
|
+
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;
|
|
10
|
+
var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[1];
|
|
11
|
+
var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
|
|
12
|
+
var _f = useState(propError || ""), error = _f[0], setError = _f[1];
|
|
13
|
+
var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
|
|
14
|
+
var inputRef = useRef(null);
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
setValue(propValue || "");
|
|
17
|
+
}, [propValue]);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
setError(propError || "");
|
|
20
|
+
}, [propError]);
|
|
21
|
+
var validateInput = useCallback(function () {
|
|
22
|
+
var _a;
|
|
23
|
+
// console.log(`Input ${title}: Validating input`);
|
|
24
|
+
var currentValue = ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || value;
|
|
25
|
+
// console.log(`Input ${title}: Current value: "${currentValue}"`);
|
|
26
|
+
var errorMessage = "";
|
|
27
|
+
if (isRequired && currentValue.trim() === "") {
|
|
28
|
+
errorMessage = "Ce champ est requis";
|
|
29
|
+
}
|
|
30
|
+
else if (validate && currentValue) {
|
|
31
|
+
var regex = typeof validate === "string" ? commonRegex[validate] : validate;
|
|
32
|
+
// console.log(`Input ${title}: Regex used: ${regex}`);
|
|
33
|
+
if (!regex.test(currentValue)) {
|
|
34
|
+
errorMessage = "Veuillez vérifier votre saisie";
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
setError(errorMessage);
|
|
38
|
+
setIsTouched(true);
|
|
39
|
+
// console.log(
|
|
40
|
+
// `Input ${title}: Validation result - ${errorMessage ? "invalid" : "valid"}`
|
|
41
|
+
// );
|
|
42
|
+
onError === null || onError === void 0 ? void 0 : onError(errorMessage);
|
|
43
|
+
return !errorMessage;
|
|
44
|
+
}, [isRequired, value, validate, onError, title]);
|
|
45
|
+
useImperativeHandle(ref, function () { return ({
|
|
46
|
+
validate: validateInput,
|
|
47
|
+
}); });
|
|
48
|
+
var handleChange = function (e) {
|
|
49
|
+
var newValue = e.target.value;
|
|
50
|
+
// console.log(`Input ${title}: Value changed to "${newValue}"`);
|
|
51
|
+
setValue(newValue);
|
|
52
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
53
|
+
if (isTouched) {
|
|
54
|
+
validateInput();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
var handleBlur = function () {
|
|
58
|
+
// console.log(`Input ${title}: Blur event triggered`);
|
|
59
|
+
setIsTouched(true);
|
|
60
|
+
validateInput();
|
|
61
|
+
};
|
|
62
|
+
var renderEndIcon = function () {
|
|
63
|
+
if (style === "variation" && endIcon) {
|
|
64
|
+
return (React.createElement("button", { className: "Input-icon-button" },
|
|
65
|
+
React.createElement("i", { className: endIcon })));
|
|
66
|
+
}
|
|
67
|
+
if (style === "password") {
|
|
68
|
+
return (React.createElement("button", { className: "Input-button", onClick: function () { return setIsPasswordVisible(!isPasswordVisible); } }, isPasswordVisible ? "CACHER" : "AFFICHER"));
|
|
69
|
+
}
|
|
70
|
+
return null;
|
|
71
|
+
};
|
|
72
|
+
return (React.createElement("div", { className: "Input Input-".concat(style) },
|
|
73
|
+
React.createElement("div", { className: "Input-title-container" },
|
|
74
|
+
React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
|
|
75
|
+
isRequired && title && (React.createElement("span", { className: "Input-required" },
|
|
76
|
+
"\u00A0",
|
|
77
|
+
"*"))),
|
|
78
|
+
React.createElement("div", { className: "Input-container" },
|
|
79
|
+
React.createElement("div", { className: "Input-input ".concat(style === "password" ? "Input-password-input" : "") },
|
|
80
|
+
React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : "text", placeholder: placeholder, className: "Input-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
|
|
81
|
+
renderEndIcon(),
|
|
82
|
+
error && isTouched && (React.createElement("div", { className: "error-message" },
|
|
83
|
+
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
|
|
84
|
+
});
|
|
85
|
+
Input.displayName = "Input";
|
|
86
|
+
export default Input;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./SearchBar.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
export interface SearchBarProps {
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
endIcon?: string;
|
|
8
|
+
value?: string;
|
|
9
|
+
onChange?: (value: string) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const SearchBar: React.FC<SearchBarProps>;
|
|
12
|
+
export default SearchBar;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import "./SearchBar.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
var SearchBar = function (_a) {
|
|
6
|
+
var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, _c = _a.endIcon, endIcon = _c === void 0 ? "allaw-icon-search" : _c, _d = _a.value, controlledValue = _d === void 0 ? "" : _d, onChange = _a.onChange;
|
|
7
|
+
var _e = useState(controlledValue), value = _e[0], setValue = _e[1];
|
|
8
|
+
var handleChange = function (event) {
|
|
9
|
+
var newValue = event.target.value;
|
|
10
|
+
setValue(newValue);
|
|
11
|
+
if (onChange) {
|
|
12
|
+
onChange(newValue);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
return (React.createElement("div", { className: "SearchBar" },
|
|
16
|
+
React.createElement("input", { type: "text", placeholder: placeholder, className: "SearchBar-placeholder", value: controlledValue || value, onChange: handleChange }),
|
|
17
|
+
React.createElement("button", { className: "SearchBar-icon-button" },
|
|
18
|
+
React.createElement("i", { className: endIcon }))));
|
|
19
|
+
};
|
|
20
|
+
export default SearchBar;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ProgressBar.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
export interface ProgressBarProps {
|
|
6
|
+
steps: number;
|
|
7
|
+
currentStep: number;
|
|
8
|
+
startIcon?: boolean;
|
|
9
|
+
endIcon?: boolean;
|
|
10
|
+
onStartIconClick?: () => void;
|
|
11
|
+
onEndIconClick?: () => void;
|
|
12
|
+
showProgressBar?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
15
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ProgressBar.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
var ProgressBar = function (_a) {
|
|
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(1, Math.min(currentStep, steps));
|
|
8
|
+
var progressWidth = ((constrainedCurrentStep - 1) / (steps - 1)) * 100;
|
|
9
|
+
return (React.createElement("div", { className: "progress-bar-container" },
|
|
10
|
+
React.createElement("div", { className: "progress-bar-icon-container" }, startIcon && currentStep > 1 && (React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
|
|
11
|
+
React.createElement("i", { className: "allaw-icon-chevron-left" })))),
|
|
12
|
+
React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
|
|
13
|
+
React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
|
|
14
|
+
endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
|
|
15
|
+
React.createElement("i", { className: "allaw-icon-close" })))));
|
|
16
|
+
};
|
|
17
|
+
export default ProgressBar;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProgressBar } from "./ProgressBar";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./RadioButton.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
export interface RadioButtonProps {
|
|
5
|
+
label: string;
|
|
6
|
+
style?: "user" | "hybride";
|
|
7
|
+
isActive: boolean;
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const RadioButton: React.FC<RadioButtonProps>;
|
|
11
|
+
export default RadioButton;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./RadioButton.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
var RadioButton = function (_a) {
|
|
5
|
+
var label = _a.label, _b = _a.style, style = _b === void 0 ? "user" : _b, isActive = _a.isActive, onClick = _a.onClick;
|
|
6
|
+
return (React.createElement("button", { className: "radio-button radio-button-".concat(style, " ").concat(isActive ? "radio-button-".concat(style, "-active") : ""), onClick: onClick },
|
|
7
|
+
React.createElement("span", { className: "radio-button-icon" }, isActive && React.createElement("span", { className: "radio-button-icon-inner" })),
|
|
8
|
+
React.createElement("span", { className: "radio-button-label" }, label)));
|
|
9
|
+
};
|
|
10
|
+
export default RadioButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as RadioButton } from "./RadioButton";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Select.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
export interface SelectItem {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string;
|
|
7
|
+
}
|
|
8
|
+
export interface SelectProps<T extends string | string[]> {
|
|
9
|
+
items: SelectItem[];
|
|
10
|
+
selectedItem?: T;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
multiple?: boolean;
|
|
13
|
+
isRequired?: boolean;
|
|
14
|
+
showError?: boolean;
|
|
15
|
+
onChange?: (selected: T) => void;
|
|
16
|
+
onError?: (error: string) => void;
|
|
17
|
+
}
|
|
18
|
+
export interface SelectRef {
|
|
19
|
+
validate: () => boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const _default: <T extends string | string[]>(props: SelectProps<T> & {
|
|
22
|
+
ref?: React.Ref<SelectRef>;
|
|
23
|
+
}) => React.ReactElement;
|
|
24
|
+
export default _default;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
+
if (ar || !(i in from)) {
|
|
4
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
+
ar[i] = from[i];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
+
};
|
|
10
|
+
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
|
|
11
|
+
import "./Select.css";
|
|
12
|
+
import "../../../styles/global.css";
|
|
13
|
+
import TinyInfo from "../typography/TinyInfo";
|
|
14
|
+
function Select(_a, ref) {
|
|
15
|
+
var _b;
|
|
16
|
+
var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, onChange = _a.onChange, onError = _a.onError;
|
|
17
|
+
var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
|
|
18
|
+
var _h = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _h[0], setSelected = _h[1];
|
|
19
|
+
var _j = useState(""), error = _j[0], setError = _j[1];
|
|
20
|
+
var selectRef = useRef(null);
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
setSelected((multiple ? selectedItem || [] : selectedItem || ""));
|
|
23
|
+
}, [selectedItem, multiple]);
|
|
24
|
+
var handleSelect = function (item) {
|
|
25
|
+
var newSelected;
|
|
26
|
+
if (multiple) {
|
|
27
|
+
newSelected = (Array.isArray(selected)
|
|
28
|
+
? selected.includes(item.value)
|
|
29
|
+
? selected.filter(function (i) { return i !== item.value; })
|
|
30
|
+
: __spreadArray(__spreadArray([], selected, true), [item.value], false)
|
|
31
|
+
: [item.value]);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
newSelected = item.value;
|
|
35
|
+
setIsOpen(false);
|
|
36
|
+
}
|
|
37
|
+
setSelected(newSelected);
|
|
38
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newSelected);
|
|
39
|
+
validateSelect(newSelected);
|
|
40
|
+
};
|
|
41
|
+
var validateSelect = function (value) {
|
|
42
|
+
var isEmpty = value === "" || (Array.isArray(value) && value.length === 0);
|
|
43
|
+
var errorMessage = isRequired && isEmpty ? "Ce champ est requis" : "";
|
|
44
|
+
setError(errorMessage);
|
|
45
|
+
onError === null || onError === void 0 ? void 0 : onError(errorMessage);
|
|
46
|
+
return !errorMessage;
|
|
47
|
+
};
|
|
48
|
+
var toggleOpen = function () {
|
|
49
|
+
setIsOpen(!isOpen);
|
|
50
|
+
};
|
|
51
|
+
var handleClickOutside = function (event) {
|
|
52
|
+
if (selectRef.current &&
|
|
53
|
+
!selectRef.current.contains(event.target)) {
|
|
54
|
+
setIsOpen(false);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
useEffect(function () {
|
|
58
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
59
|
+
return function () {
|
|
60
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
61
|
+
};
|
|
62
|
+
}, []);
|
|
63
|
+
useImperativeHandle(ref, function () { return ({
|
|
64
|
+
validate: function () { return validateSelect(selected); },
|
|
65
|
+
}); });
|
|
66
|
+
return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : "") },
|
|
67
|
+
React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen },
|
|
68
|
+
React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
|
|
69
|
+
? selected
|
|
70
|
+
.map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
|
|
71
|
+
.join(", ")
|
|
72
|
+
: !Array.isArray(selected) && selected
|
|
73
|
+
? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
|
|
74
|
+
: placeholder),
|
|
75
|
+
React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
|
|
76
|
+
isOpen && (React.createElement("div", { className: "select-list" }, items.map(function (item) { return (React.createElement("div", { key: item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
|
|
77
|
+
? "selected"
|
|
78
|
+
: "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
|
|
79
|
+
multiple && (React.createElement("span", { className: "select-item-icon allaw-icon-check" })),
|
|
80
|
+
React.createElement("span", { className: "select-item-text" }, item.label))); }))),
|
|
81
|
+
isRequired && showError && error && (React.createElement("div", { className: "error-message" },
|
|
82
|
+
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
|
|
83
|
+
}
|
|
84
|
+
export default forwardRef(Select);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Select";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
export interface AppointementStatusTagProps {
|
|
4
|
+
status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
|
|
5
|
+
variant?: "default" | "big";
|
|
6
|
+
}
|
|
7
|
+
declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
|
|
8
|
+
export default AppointementStatusTag;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
var statusStyles = {
|
|
4
|
+
confirmed: "status-confirmed",
|
|
5
|
+
pending: "status-pending",
|
|
6
|
+
available: "status-available",
|
|
7
|
+
unavailable: "status-unavailable",
|
|
8
|
+
cancelled: "status-cancelled",
|
|
9
|
+
passed: "status-passed",
|
|
10
|
+
refused: "status-refused",
|
|
11
|
+
};
|
|
12
|
+
var statusLabels = {
|
|
13
|
+
confirmed: "CONFIRMÉ",
|
|
14
|
+
pending: "EN ATTENTE",
|
|
15
|
+
available: "DISPONIBLE",
|
|
16
|
+
unavailable: "INDISPONIBLE",
|
|
17
|
+
cancelled: "ANNULÉ",
|
|
18
|
+
passed: "PASSÉ",
|
|
19
|
+
refused: "REFUSÉ",
|
|
20
|
+
};
|
|
21
|
+
var variantLabels = {
|
|
22
|
+
confirmed: "RDV CONFIRMÉ",
|
|
23
|
+
passed: "RDV PASSÉ",
|
|
24
|
+
cancelled: "RDV ANNULÉ",
|
|
25
|
+
};
|
|
26
|
+
var variantStyles = {
|
|
27
|
+
big: "variant-big",
|
|
28
|
+
default: "variant-default",
|
|
29
|
+
};
|
|
30
|
+
var AppointementStatusTag = function (_a) {
|
|
31
|
+
var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
32
|
+
var label = variant === "big" && variantLabels[status]
|
|
33
|
+
? variantLabels[status]
|
|
34
|
+
: statusLabels[status];
|
|
35
|
+
var variantClass = variantStyles[variant];
|
|
36
|
+
var specificStyles = status === "cancelled" && variant === "big"
|
|
37
|
+
? "status-cancelled-big"
|
|
38
|
+
: statusStyles[status];
|
|
39
|
+
return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
|
|
40
|
+
};
|
|
41
|
+
export default AppointementStatusTag;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./FolderStatusTag.css";
|
|
3
|
+
var FolderStatusTag = function (_a) {
|
|
4
|
+
var _b = _a.isClosed, isClosed = _b === void 0 ? false : _b;
|
|
5
|
+
var label = isClosed ? "DOSSIER CLÔS" : "DOSSIER OUVERT";
|
|
6
|
+
return (React.createElement("div", { className: "folder-status-tag ".concat(isClosed ? "closed" : "open") }, label));
|
|
7
|
+
};
|
|
8
|
+
export default FolderStatusTag;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./OtherStatusTag.css";
|
|
3
|
+
export interface OtherStatusTagProps {
|
|
4
|
+
label?: string;
|
|
5
|
+
type?: "readonly" | "editable" | "information";
|
|
6
|
+
startIcon?: boolean;
|
|
7
|
+
startIconName?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const OtherStatusTag: React.FC<OtherStatusTagProps>;
|
|
10
|
+
export default OtherStatusTag;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./OtherStatusTag.css";
|
|
3
|
+
var OtherStatusTag = function (_a) {
|
|
4
|
+
var _b = _a.label, label = _b === void 0 ? "Tags" : _b, _c = _a.type, type = _c === void 0 ? "readonly" : _c, _d = _a.startIcon, startIcon = _d === void 0 ? false : _d, _e = _a.startIconName, startIconName = _e === void 0 ? "allaw-icon-pmr" : _e;
|
|
5
|
+
return (React.createElement("div", { className: "other-status-tag ".concat(type) },
|
|
6
|
+
type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
|
|
7
|
+
label,
|
|
8
|
+
type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));
|
|
9
|
+
};
|
|
10
|
+
export default OtherStatusTag;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as AppointementStatusTag } from "./AppointementStatusTag";
|
|
2
|
+
export { default as FolderStatusTag } from "./FolderStatusTag";
|
|
3
|
+
export { default as OtherStatusTag } from "./OtherStatusTag";
|
|
4
|
+
export type { AppointementStatusTagProps } from "./AppointementStatusTag";
|
|
5
|
+
export type { FolderStatusTagProps } from "./FolderStatusTag";
|
|
6
|
+
export type { OtherStatusTagProps } from "./OtherStatusTag";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Heading.css";
|
|
3
|
+
export interface HeadingProps {
|
|
4
|
+
variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
+
text: React.ReactNode;
|
|
7
|
+
align?: "left" | "justify" | "center";
|
|
8
|
+
}
|
|
9
|
+
declare const Heading: React.FC<HeadingProps>;
|
|
10
|
+
export default Heading;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Heading.css";
|
|
3
|
+
var Heading = function (_a) {
|
|
4
|
+
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c;
|
|
5
|
+
return React.createElement("span", { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align) }, text);
|
|
6
|
+
};
|
|
7
|
+
export default Heading;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Paragraph.css";
|
|
3
|
+
export interface ParagraphProps {
|
|
4
|
+
variant: "bold" | "semiBold" | "medium";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
|
|
6
|
+
text: React.ReactNode;
|
|
7
|
+
maxLines?: number;
|
|
8
|
+
maxChars?: number;
|
|
9
|
+
size?: "default" | "small";
|
|
10
|
+
}
|
|
11
|
+
declare const Paragraph: React.FC<ParagraphProps>;
|
|
12
|
+
export default Paragraph;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Paragraph.css";
|
|
3
|
+
var Paragraph = function (_a) {
|
|
4
|
+
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b;
|
|
5
|
+
// Fonction pour tronquer le texte en fonction du nombre maximum de caractères
|
|
6
|
+
var truncateText = function (text, maxChars) {
|
|
7
|
+
if (text.length <= maxChars)
|
|
8
|
+
return text;
|
|
9
|
+
return text.slice(0, maxChars) + "...";
|
|
10
|
+
};
|
|
11
|
+
// Tronquer le texte si maxChars est défini
|
|
12
|
+
var truncatedText = maxChars
|
|
13
|
+
? truncateText(text, maxChars)
|
|
14
|
+
: text;
|
|
15
|
+
return (React.createElement("p", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(size === "small" ? "paragraph-small" : ""), style: maxLines
|
|
16
|
+
? {
|
|
17
|
+
WebkitLineClamp: maxLines,
|
|
18
|
+
display: "-webkit-box",
|
|
19
|
+
WebkitBoxOrient: "vertical",
|
|
20
|
+
overflow: "hidden",
|
|
21
|
+
}
|
|
22
|
+
: {} }, truncatedText));
|
|
23
|
+
};
|
|
24
|
+
export default Paragraph;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./SmallTitle.css";
|
|
3
|
+
export interface SmallTitleProps {
|
|
4
|
+
variant: "bold20" | "medium32" | "semiBold12" | "medium12";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
declare const SmallTitle: React.FC<SmallTitleProps>;
|
|
9
|
+
export default SmallTitle;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./SmallTitle.css";
|
|
3
|
+
var SmallTitle = function (_a) {
|
|
4
|
+
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text;
|
|
5
|
+
return (React.createElement("p", { className: "small-title ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
|
|
6
|
+
};
|
|
7
|
+
export default SmallTitle;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Subtitle.css";
|
|
3
|
+
export interface SubtitleProps {
|
|
4
|
+
variant: "bold" | "medium";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
declare const Subtitle: React.FC<SubtitleProps>;
|
|
9
|
+
export default Subtitle;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Subtitle.css";
|
|
3
|
+
var Subtitle = function (_a) {
|
|
4
|
+
var variant = _a.variant, color = _a.color, text = _a.text;
|
|
5
|
+
return (React.createElement("p", { className: "subtitle ".concat(variant, " ").concat(color ? "color-".concat(color) : ""), dangerouslySetInnerHTML: { __html: text } }));
|
|
6
|
+
};
|
|
7
|
+
export default Subtitle;
|