allaw-ui 0.0.354 → 0.1.12

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 (9) hide show
  1. package/dist/components/atoms/buttons/PrimaryButton.css +24 -0
  2. package/dist/components/atoms/buttons/PrimaryButton.d.ts +2 -1
  3. package/dist/components/atoms/buttons/PrimaryButton.js +85 -4
  4. package/dist/components/atoms/filters/SingleFilter.js +20 -9
  5. package/dist/components/atoms/progressBars/ProgressBar.js +3 -2
  6. package/dist/components/atoms/typography/TinyInfo.css +3 -0
  7. package/dist/components/atoms/typography/TinyInfo.d.ts +1 -1
  8. package/dist/components/molecules/proCard/ProCard.js +2 -2
  9. package/package.json +1 -1
package/dist/components/atoms/buttons/PrimaryButton.css CHANGED
@@ -55,3 +55,27 @@
55
55
  .primary-button-full-width {
56
56
  width: 100%;
57
57
  }
58
+
59
+ .primary-button-loading {
60
+ animation: pulse-background 1.5s infinite alternate;
61
+ pointer-events: none;
62
+ }
63
+
64
+ @keyframes pulse-background {
65
+ 0% {
66
+ background-color: #171e25;
67
+ }
68
+ 50% {
69
+ background-color: #171e25;
70
+ }
71
+ 100% {
72
+ background-color: #1985e8;
73
+ }
74
+ }
75
+
76
+ .primary-button-loading-dots {
77
+ width: 1.25rem;
78
+ display: inline-block;
79
+ text-align: left;
80
+ font-size: 0.9rem;
81
+ }
package/dist/components/atoms/buttons/PrimaryButton.d.ts CHANGED
@@ -8,9 +8,10 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
8
8
  endIconName?: string;
9
9
  label: string;
10
10
  disabled?: boolean;
11
- onClick?: () => void;
11
+ onClick?: () => Promise<void> | void;
12
12
  fullWidth?: boolean;
13
13
  type?: "button" | "submit" | "reset";
14
+ isLoading?: boolean;
14
15
  }
15
16
  declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
16
17
  export default PrimaryButton;
package/dist/components/atoms/buttons/PrimaryButton.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __assign = (this && this.__assign) || function () {
2
3
  __assign = Object.assign || function(t) {
3
4
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
9
10
  };
10
11
  return __assign.apply(this, arguments);
11
12
  };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
12
49
  var __rest = (this && this.__rest) || function (s, e) {
13
50
  var t = {};
14
51
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,17 +57,61 @@ var __rest = (this && this.__rest) || function (s, e) {
20
57
  }
21
58
  return t;
22
59
  };
23
- import React, { forwardRef, useImperativeHandle, } from "react";
60
+ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
24
61
  import "./PrimaryButton.css";
25
62
  import "../../../styles/global.css";
26
63
  var PrimaryButton = forwardRef(function (_a, ref) {
27
- var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type"]);
64
+ var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading"]);
28
65
  var buttonRef = React.useRef(null);
66
+ var _f = useState(false), internalIsLoading = _f[0], setInternalIsLoading = _f[1];
67
+ var _g = useState(""), loadingDots = _g[0], setLoadingDots = _g[1];
29
68
  useImperativeHandle(ref, function () { return buttonRef.current; });
30
- return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : ""), disabled: disabled, onClick: onClick, type: type }, props),
69
+ var isButtonLoading = isLoading || internalIsLoading;
70
+ useEffect(function () {
71
+ var interval = null;
72
+ if (isButtonLoading) {
73
+ interval = setInterval(function () {
74
+ setLoadingDots(function (prev) {
75
+ if (prev.length >= 3)
76
+ return "";
77
+ return prev + ".";
78
+ });
79
+ }, 500);
80
+ }
81
+ return function () {
82
+ if (interval) {
83
+ clearInterval(interval);
84
+ }
85
+ };
86
+ }, [isButtonLoading]);
87
+ var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
88
+ return __generator(this, function (_a) {
89
+ switch (_a.label) {
90
+ case 0:
91
+ if (isButtonLoading) {
92
+ event.preventDefault();
93
+ return [2 /*return*/];
94
+ }
95
+ if (!onClick) return [3 /*break*/, 4];
96
+ setInternalIsLoading(true);
97
+ _a.label = 1;
98
+ case 1:
99
+ _a.trys.push([1, , 3, 4]);
100
+ return [4 /*yield*/, onClick()];
101
+ case 2:
102
+ _a.sent();
103
+ return [3 /*break*/, 4];
104
+ case 3:
105
+ setInternalIsLoading(false);
106
+ return [7 /*endfinally*/];
107
+ case 4: return [2 /*return*/];
108
+ }
109
+ });
110
+ }); };
111
+ return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
31
112
  startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
32
113
  React.createElement("span", { className: "primary-button-label" }, label),
33
- endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })));
114
+ isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) }))));
34
115
  });
35
116
  PrimaryButton.displayName = "PrimaryButton";
36
117
  export default PrimaryButton;
package/dist/components/atoms/filters/SingleFilter.js CHANGED
@@ -23,38 +23,48 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import "./SingleFilter.css";
24
24
  import { FilterButtonPrimary, PrimaryButton } from "../buttons";
25
25
  import { TinyInfo } from "../typography";
26
- import React, { useState } from "react";
26
+ import React, { useState, useEffect } from "react";
27
27
  var SingleFilter = function (_a) {
28
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
29
  var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
30
30
  var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
31
+ useEffect(function () {
32
+ if (selectedValue) {
33
+ setFilter(selectedValue);
34
+ }
35
+ }, [selectedValue, setFilter]);
31
36
  var handleClose = function () {
32
- setFilter(selectedValue);
33
37
  setIsOpen(false);
34
38
  };
35
39
  var handleButtonTap = function () {
36
- isOpen ? handleClose() : setIsOpen(true);
40
+ setIsOpen(!isOpen);
37
41
  };
38
42
  var Item = function (_a) {
39
43
  var name = _a.name, value = _a.value;
40
- return (React.createElement("button", { className: "item", onClick: function () { setSelectedValue(value); handleClose(); } },
44
+ return (React.createElement("button", { className: "item", onClick: function () {
45
+ setSelectedValue(value);
46
+ handleClose();
47
+ } },
41
48
  React.createElement("div", { className: "round" },
42
49
  React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
43
50
  React.createElement("span", null, name)));
44
51
  };
45
52
  var SmallItem = function (_a) {
46
53
  var name = _a.name, value = _a.value;
47
- return (React.createElement("button", { className: "smallItem", onClick: function () { setSelectedValue(value); } },
54
+ return (React.createElement("button", { className: "smallItem", onClick: function () {
55
+ setSelectedValue(value);
56
+ } },
48
57
  React.createElement("div", { className: "round" },
49
58
  React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
50
59
  React.createElement("span", null, name)));
51
60
  };
52
61
  return (React.createElement(React.Fragment, null,
53
62
  React.createElement("div", __assign({ className: "baseFilter" }, props),
54
- React.createElement(FilterButtonPrimary, { onClick: handleButtonTap, zIndex: "2000" },
63
+ React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
55
64
  children,
56
65
  React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
57
- isOpen && (React.createElement("div", { className: "options" }, filterData && filterData.length > 0 &&
66
+ isOpen && (React.createElement("div", { className: "options" }, filterData &&
67
+ filterData.length > 0 &&
58
68
  filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
59
69
  React.createElement("div", { className: "optionsSmall", style: { bottom: isOpen ? "0" : "-100%" } },
60
70
  React.createElement("div", { className: "row" },
@@ -62,9 +72,10 @@ var SingleFilter = function (_a) {
62
72
  React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
63
73
  React.createElement("button", { className: "closeButton", onClick: handleClose },
64
74
  React.createElement("i", { className: "allaw-icon-close" }))),
65
- React.createElement("div", { className: "choices" }, filterData && filterData.length > 0 &&
75
+ React.createElement("div", { className: "choices" }, filterData &&
76
+ filterData.length > 0 &&
66
77
  filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
67
78
  React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))),
68
- isOpen && (React.createElement("div", { className: "backdrop", onClick: handleClose }))));
79
+ isOpen && React.createElement("div", { className: "backdrop", onClick: handleClose })));
69
80
  };
70
81
  export default SingleFilter;
package/dist/components/atoms/progressBars/ProgressBar.js CHANGED
@@ -7,8 +7,9 @@ var ProgressBar = function (_a) {
7
7
  var constrainedCurrentStep = Math.max(1, Math.min(currentStep, steps));
8
8
  var progressWidth = ((constrainedCurrentStep - 1) / (steps - 1)) * 100;
9
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" })))),
10
+ startIcon && currentStep > 1 && (React.createElement("div", { className: "progress-bar-icon-container" },
11
+ React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
12
+ React.createElement("i", { className: "allaw-icon-chevron-left" })))),
12
13
  React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
13
14
  React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
14
15
  endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
package/dist/components/atoms/typography/TinyInfo.css CHANGED
@@ -54,3 +54,6 @@
54
54
  .tiny-info.color-actions-error {
55
55
  color: var(--actions-error);
56
56
  }
57
+ .tiny-info.color-actions-valid {
58
+ color: var(--actions-valid);
59
+ }
package/dist/components/atoms/typography/TinyInfo.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import "./TinyInfo.css";
3
3
  export interface TinyInfoProps {
4
4
  variant: "bold14" | "medium14" | "semiBold12" | "medium12";
5
- color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error";
5
+ color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
6
6
  text: string;
7
7
  href?: string;
8
8
  className?: string;
package/dist/components/molecules/proCard/ProCard.js CHANGED
@@ -18,8 +18,8 @@ var ProCard = function (_a) {
18
18
  React.createElement(OtherStatusTag, { label: uppercaseJob, type: "information" }),
19
19
  React.createElement("h3", { className: "pro-card-name" },
20
20
  React.createElement("a", { href: profileUrl }, "".concat(firstName, " ").concat(lastName))))),
21
- React.createElement("div", { className: "pro-card-address" },
21
+ address && /[a-zA-Z0-9]/.test(address) && (React.createElement("div", { className: "pro-card-address" },
22
22
  React.createElement("i", { className: "icon allaw-icon-map-pin" }),
23
- React.createElement("span", null, address)))));
23
+ React.createElement("span", null, address))))));
24
24
  };
25
25
  export default ProCard;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "0.0.354",
3
+ "version": "0.1.12",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",