allaw-ui 4.2.4 → 4.2.6
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/molecules/DataStepper/Stepper.d.ts +7 -0
- package/dist/components/molecules/DataStepper/Stepper.js +38 -6
- package/dist/components/molecules/DataStepper/Stepper.stories.js +39 -2
- package/dist/components/molecules/DataStepper/index.d.ts +1 -1
- package/dist/components/molecules/proSwitch/ProSwitch.d.ts +1 -1
- package/dist/components/molecules/proSwitch/index.d.ts +6 -0
- package/dist/components/molecules/proSwitch/index.js +3 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -8,6 +8,12 @@ export type StepField = {
|
|
|
8
8
|
customComponent?: React.ComponentType<any>;
|
|
9
9
|
customProps?: Record<string, any>;
|
|
10
10
|
};
|
|
11
|
+
export type StepButton = {
|
|
12
|
+
label: string;
|
|
13
|
+
action: "next" | "prev" | ((values: Record<string, any>) => void);
|
|
14
|
+
type?: "primary" | "secondary" | "small";
|
|
15
|
+
disabled?: boolean | ((values: Record<string, any>) => boolean);
|
|
16
|
+
};
|
|
11
17
|
export type StepConfig = {
|
|
12
18
|
title: string;
|
|
13
19
|
description?: string;
|
|
@@ -17,6 +23,7 @@ export type StepConfig = {
|
|
|
17
23
|
disableNextUntilValid?: boolean;
|
|
18
24
|
hidePrevButton?: boolean;
|
|
19
25
|
nextLabel?: string;
|
|
26
|
+
buttons?: StepButton[];
|
|
20
27
|
};
|
|
21
28
|
export type StepperProps = {
|
|
22
29
|
config: StepConfig[];
|
|
@@ -14,6 +14,7 @@ import Input from "../../atoms/inputs/Input";
|
|
|
14
14
|
import Select from "../../atoms/selects/Select";
|
|
15
15
|
import ComboBox from "../../atoms/selects/ComboBox";
|
|
16
16
|
import Paragraph from "../../atoms/typography/Paragraph";
|
|
17
|
+
import TertiaryButton from "../../atoms/buttons/TertiaryButton";
|
|
17
18
|
// FieldRenderer: rend le bon input selon le type
|
|
18
19
|
var FieldRenderer = function (_a) {
|
|
19
20
|
var field = _a.field, value = _a.value, onChange = _a.onChange;
|
|
@@ -75,7 +76,7 @@ var FieldRenderer = function (_a) {
|
|
|
75
76
|
}
|
|
76
77
|
};
|
|
77
78
|
// Ajout/ajustement du style CSS-in-JS pour le layout 2 colonnes et plus de spacing
|
|
78
|
-
var stepperStyle = "\n.stepper-allaw {\n background: var(--pure-white, #fff);\n border: 1px solid var(--grey-venom, #e6edf5);\n border-radius: 16px;\n box-shadow: 0 2px 8px rgba(37, 190, 235, 0.06);\n padding: 32px;\n max-width: 100vw;\n min-width: 100%;\n width: 700px;\n margin: 0 auto;\n font-family: 'Inter', 'Open Sans', Arial, sans-serif;\n}\n.stepper-progress-bar {\n width: 100%;\n height: 6px;\n background: var(--grey
|
|
79
|
+
var stepperStyle = "\n.stepper-allaw {\n background: var(--pure-white, #fff);\n border: 1px solid var(--grey-venom, #e6edf5);\n border-radius: 16px;\n box-shadow: 0 2px 8px rgba(37, 190, 235, 0.06);\n padding: 32px;\n max-width: 100vw;\n min-width: 100%;\n width: 700px;\n margin: 0 auto;\n font-family: 'Inter', 'Open Sans', Arial, sans-serif;\n}\n.stepper-progress-bar {\n width: 100%;\n height: 6px;\n background: var(--primary-venom-grey);\n border-radius: 8px;\n overflow: hidden;\n}\n.stepper-progress-inner {\n height: 100%;\n background: var(--bleu-allaw, #25beeb);\n border-radius: 8px;\n transition: width 0.3s;\n}\n.stepper-title {\n color: var(--noir, #171e25);\n font-family: 'Poppins', Arial, sans-serif;\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 8px;\n}\n.stepper-desc {\n color: var(--mid-grey, #728ea7);\n font-family: 'Open Sans', Arial, sans-serif;\n font-size: 1rem;\n}\n.stepper-fields-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 24px 24px;\n margin-bottom: 42px;\n}\n.stepper-field {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 8px;\n margin-bottom: 0;\n}\n.stepper-label {\n color: var(--dark-grey, #456073);\n font-size: 1rem;\n font-weight: 500;\n margin-bottom: 2px;\n min-width: 0;\n flex-shrink: 1;\n}\n.stepper-input, .stepper-select, .stepper-datalist {\n border: 1px solid var(--grey-venom, #e6edf5);\n border-radius: 8px;\n padding: 10px 12px;\n font-size: 1rem;\n font-family: inherit;\n background: var(--pure-white, #fff);\n color: var(--noir, #171e25);\n outline: none;\n transition: border-color 0.2s;\n flex: 1 1 0%;\n}\n.stepper-input:focus, .stepper-select:focus, .stepper-datalist:focus {\n border-color: var(--bleu-allaw, #25beeb);\n}\n.stepper-btn-row {\n display: flex;\n gap: 12px;\n margin-top: 32px;\n}\n@media (max-width: 599px) {\n .stepper-btn-row {\n flex-direction: column;\n gap: 12px;\n }\n}\n.stepper-btn {\n background: var(--bleu-allaw, #25beeb);\n color: var(--pure-white, #fff);\n border: none;\n border-radius: 8px;\n padding: 8px 16px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.2s;\n flex: 1 1 0%;\n width: 100%;\n min-width: 0;\n}\n.stepper-btn:disabled {\n background: var(--grey-venom, #e6edf5);\n color: var(--mid-grey, #728ea7);\n cursor: not-allowed;\n}\n.stepper-btn:not(:disabled):hover {\n background: #1ca6d4;\n}\n.stepper-btn-secondary {\n background: #fff;\n color: var(--bleu-allaw, #25beeb);\n border: 2px solid var(--bleu-allaw, #25beeb);\n margin-right: 8px;\n}\n.stepper-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.6);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: all;\n}\n.stepper-modal-center {\n position: fixed;\n\n z-index: 1001;\n max-height: 98vh;\n overflow-y: auto;\n box-shadow: 0 8px 32px rgba(23, 30, 37, 0.18);\n pointer-events: all;\n}\n\n@media (max-width: 600px) {\n .stepper-allaw {\n height: 100%;\n }\n .stepper-modal-center {\n bottom: 0;\n right: 0;\n left: 0;\n width: 100vw;\n height: 98vh;\n transform: translate(0, 0);\n }\n}\n.stepper-modal-close {\n position: absolute;\n top: 18px;\n right: 18px;\n background: none;\n border: none;\n color: var(--mid-grey, #728ea7);\n font-size: 2rem;\n cursor: pointer;\n z-index: 1002;\n transition: color 0.2s;\n}\n.stepper-modal-close:hover {\n color: var(--noir, #171e25);\n}\n";
|
|
79
80
|
if (typeof window !== 'undefined' && !document.getElementById('stepper-allaw-style')) {
|
|
80
81
|
var style = document.createElement('style');
|
|
81
82
|
style.id = 'stepper-allaw-style';
|
|
@@ -155,15 +156,44 @@ export var Stepper = function (_a) {
|
|
|
155
156
|
var isStepValid = !currentStep.validate || currentStep.validate(values) === true;
|
|
156
157
|
if (!isOpen)
|
|
157
158
|
return null;
|
|
159
|
+
// Nouvelle fonction pour gérer l'action d'un bouton
|
|
160
|
+
var handleButtonAction = function (action) {
|
|
161
|
+
if (action === "next") {
|
|
162
|
+
handleNext();
|
|
163
|
+
}
|
|
164
|
+
else if (action === "prev") {
|
|
165
|
+
handlePrev();
|
|
166
|
+
}
|
|
167
|
+
else if (typeof action === "function") {
|
|
168
|
+
action(values);
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
// Helper pour le style des boutons
|
|
172
|
+
var getButtonClass = function (type) {
|
|
173
|
+
if (type === "secondary")
|
|
174
|
+
return "stepper-btn stepper-btn-secondary";
|
|
175
|
+
if (type === "small")
|
|
176
|
+
return "stepper-btn"; // Ajoutez une classe custom si besoin
|
|
177
|
+
return "stepper-btn";
|
|
178
|
+
};
|
|
179
|
+
// Helper pour disabled
|
|
180
|
+
var isButtonDisabled = function (btn) {
|
|
181
|
+
if (typeof btn.disabled === "function")
|
|
182
|
+
return btn.disabled(values);
|
|
183
|
+
if (btn.action === "next" && currentStep.disableNextUntilValid && !isStepValid)
|
|
184
|
+
return true;
|
|
185
|
+
return !!btn.disabled;
|
|
186
|
+
};
|
|
158
187
|
return (React.createElement(React.Fragment, null,
|
|
159
188
|
React.createElement("div", { className: "stepper-modal-backdrop" },
|
|
160
189
|
React.createElement("div", { className: "stepper-modal-center" },
|
|
161
190
|
React.createElement("div", { style: { position: "relative", height: "100%" } },
|
|
162
191
|
React.createElement("div", { className: "stepper-allaw" },
|
|
163
192
|
React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "24px", justifyContent: "center", gap: 12 } },
|
|
193
|
+
React.createElement("div", { style: { minWidth: "20px" } }),
|
|
164
194
|
React.createElement("div", { className: "stepper-progress-bar", style: { flex: 1, height: 8, minWidth: 0 } },
|
|
165
195
|
React.createElement("div", { className: "stepper-progress-inner", style: { width: progress + "%", height: 8 } })),
|
|
166
|
-
React.createElement(CloseButton, { onClick: function () { return onClose && onClose(); } })),
|
|
196
|
+
onClose && React.createElement(CloseButton, { onClick: function () { return onClose && onClose(); } })),
|
|
167
197
|
React.createElement("div", { style: { marginBottom: "42px" } },
|
|
168
198
|
React.createElement("div", { className: "stepper-title" }, currentStep.title),
|
|
169
199
|
currentStep.description && React.createElement("div", { className: "stepper-desc" }, currentStep.description)),
|
|
@@ -184,9 +214,11 @@ export var Stepper = function (_a) {
|
|
|
184
214
|
showLabelAbove && (React.createElement(Paragraph, { variant: "medium", color: "noir", text: field.label, className: "stepper-label" })),
|
|
185
215
|
React.createElement(FieldRenderer, { field: field, value: values[field.name], onChange: function (val) { return handleFieldChange(field.name, val); }, values: values })));
|
|
186
216
|
})),
|
|
187
|
-
React.createElement("div", { className: "stepper-btn-row" },
|
|
188
|
-
|
|
189
|
-
React.createElement("
|
|
217
|
+
React.createElement("div", { className: "stepper-btn-row", style: { flexWrap: 'wrap', flexDirection: 'row', alignItems: 'stretch' } }, currentStep.buttons && currentStep.buttons.length > 0 ? (React.createElement(React.Fragment, null,
|
|
218
|
+
React.createElement("div", { style: { display: 'flex', width: '100%', gap: 12 } }, currentStep.buttons.filter(function (btn) { return btn.type !== 'small'; }).map(function (btn, idx) { return (React.createElement("button", { key: idx, type: btn.action === "next" ? "submit" : "button", className: getButtonClass(btn.type), onClick: btn.action === "next" ? undefined : function (e) { e.preventDefault(); handleButtonAction(btn.action); }, disabled: isButtonDisabled(btn), style: { width: '50%' } }, btn.label)); })),
|
|
219
|
+
currentStep.buttons.some(function (btn) { return btn.type === 'small'; }) && (React.createElement("div", { style: { display: 'flex', width: '100%', gap: 12, marginTop: 8, justifyContent: 'center' } }, currentStep.buttons.filter(function (btn) { return btn.type === 'small'; }).map(function (btn) { return (React.createElement(TertiaryButton, { label: btn.label, onClick: btn.action === "next" ? undefined : function () { return handleButtonAction(btn.action); }, isDisabled: isButtonDisabled(btn) })); }))))) : (React.createElement(React.Fragment, null,
|
|
220
|
+
!currentStep.hidePrevButton && (React.createElement("button", { type: "button", className: "stepper-btn stepper-btn-secondary", onClick: handlePrev, disabled: step === 0, style: { width: '50%' } }, "Pr\u00E9c\u00E9dent")),
|
|
221
|
+
React.createElement("button", { type: "submit", className: "stepper-btn", disabled: currentStep.disableNextUntilValid && !isStepValid, style: { width: '50%' } }, step === config.length - 1
|
|
190
222
|
? (currentStep.nextLabel || "Valider")
|
|
191
|
-
: (currentStep.nextLabel || "Suivant"))))))))));
|
|
223
|
+
: (currentStep.nextLabel || "Suivant"))))))))))));
|
|
192
224
|
};
|
|
@@ -60,7 +60,7 @@ var fetchCities = function (country) { return __awaiter(void 0, void 0, void 0,
|
|
|
60
60
|
var config = [
|
|
61
61
|
{
|
|
62
62
|
title: "Informations personnelles",
|
|
63
|
-
layout:
|
|
63
|
+
layout: 1,
|
|
64
64
|
fields: [
|
|
65
65
|
{ name: "firstName", label: "Prénom", type: "text" },
|
|
66
66
|
{ name: "lastName", label: "Nom", type: "text" },
|
|
@@ -73,6 +73,24 @@ var config = [
|
|
|
73
73
|
showIf: function (values) { return values.gender === "Femme"; },
|
|
74
74
|
},
|
|
75
75
|
],
|
|
76
|
+
buttons: [
|
|
77
|
+
{
|
|
78
|
+
label: "Étape suivante",
|
|
79
|
+
action: "next",
|
|
80
|
+
type: "primary",
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
label: "Custom Alert",
|
|
84
|
+
action: function (values) { return alert("Custom action! Prénom: " + (values.firstName || "")); },
|
|
85
|
+
type: "secondary",
|
|
86
|
+
disabled: function (values) { return !values.firstName; },
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
label: "Petit bouton",
|
|
90
|
+
action: function () { return alert("TertiaryButton (small) cliqué !"); },
|
|
91
|
+
type: "small",
|
|
92
|
+
},
|
|
93
|
+
],
|
|
76
94
|
},
|
|
77
95
|
{
|
|
78
96
|
title: "Adresse",
|
|
@@ -98,6 +116,25 @@ var config = [
|
|
|
98
116
|
{ name: "postalCode", label: "Code postal", type: "text", showIf: function (values) { return !!values.country; } },
|
|
99
117
|
{ name: "address", label: "Adresse complète", type: "text" },
|
|
100
118
|
],
|
|
119
|
+
buttons: [
|
|
120
|
+
{
|
|
121
|
+
label: "Custom Log",
|
|
122
|
+
action: function (values) { return console.log("Adresse: ", values.address); },
|
|
123
|
+
type: "small",
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
label: "Étape suivante",
|
|
127
|
+
action: "prev",
|
|
128
|
+
type: "secondary",
|
|
129
|
+
disbaled: false,
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
label: "Étape suivante",
|
|
133
|
+
action: "next",
|
|
134
|
+
type: "primary",
|
|
135
|
+
disabled: false,
|
|
136
|
+
},
|
|
137
|
+
],
|
|
101
138
|
},
|
|
102
139
|
{
|
|
103
140
|
title: "Préférences",
|
|
@@ -206,6 +243,6 @@ export var GrandExemple = function () { return (React.createElement("div", { sty
|
|
|
206
243
|
// eslint-disable-next-line no-alert
|
|
207
244
|
alert("Données soumises : " + JSON.stringify(values, null, 2));
|
|
208
245
|
console.log(values);
|
|
209
|
-
}, onClose: function () {
|
|
246
|
+
}, initialStep: 2, onClose: function () {
|
|
210
247
|
return alert("Données soumises : ");
|
|
211
248
|
} }))); };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './Stepper';
|
|
2
|
-
export type { StepField, StepConfig, StepperProps } from './Stepper';
|
|
2
|
+
export type { StepField, StepConfig, StepperProps, StepButton } from './Stepper';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ProSwitch } from "./ProSwitch";
|
|
2
|
+
export type { ProSwitchProps } from "./ProSwitch";
|
|
3
|
+
export { default as AvatarBubble } from "./AvatarBubble";
|
|
4
|
+
export type { AvatarBubbleProps } from "./AvatarBubble";
|
|
5
|
+
export { default as AvatarToggleGroup } from "./AvatarToggleGroup";
|
|
6
|
+
export type { AvatarToggleGroupProps } from "./AvatarToggleGroup";
|
package/dist/index.d.ts
CHANGED
|
@@ -120,3 +120,4 @@ export { default as blogTextImageBlock } from "./components/molecules/blogTextIm
|
|
|
120
120
|
export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
|
|
121
121
|
export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
|
|
122
122
|
export type { FileUploaderProps } from "./components/molecules/fileUploader/FileUploader";
|
|
123
|
+
export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
|
package/dist/index.js
CHANGED
|
@@ -115,3 +115,4 @@ export { default as BlogText } from "./components/molecules/blogText/BlogText";
|
|
|
115
115
|
export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
|
|
116
116
|
// File Uploader
|
|
117
117
|
export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
|
|
118
|
+
export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
|