allaw-ui 0.0.19 → 0.0.294

package/dist/components/atoms/radios/RadioButton.css

@@ -0,0 +1,98 @@
+.radio-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-bottom 0.15s;
+}
+
+.radio-button-user {
+  width: 362px;
+  height: 48px;
+  padding: 12px 24px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  background: var(--secondary-light-grey, #f4f7fb);
+}
+
+.radio-button-user-active {
+  background: var(--venom-grey, #e6edf5);
+}
+
+.radio-button-hybride {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.radio-button-hybride-active {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.radio-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--Primary-Blanc, #fff);
+}
+
+.radio-button-user .radio-button-icon {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #d1dce7;
+  border-radius: 50%;
+}
+
+.radio-button-user-active .radio-button-icon {
+  width: 24px;
+  height: 24px;
+  padding: 3px;
+  border: 1px solid #d1dce7;
+  border-radius: 50%;
+}
+
+.radio-button-user-active .radio-button-icon-inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary-blue, #25beeb);
+}
+
+.radio-button-hybride .radio-button-icon {
+  width: 18px;
+  height: 18px;
+  border: 1px solid #d1dce7;
+  border-radius: 50%;
+}
+
+.radio-button-hybride-active .radio-button-icon {
+  width: 18px;
+  height: 18px;
+  padding: 3px;
+  border: 0.75px solid #d1dce7;
+  border-radius: 50%;
+}
+
+.radio-button-hybride-active .radio-button-icon-inner {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: 24px;
+  background: var(--primary-blue, #25beeb);
+}
+
+.radio-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}

package/dist/components/atoms/radios/RadioButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./RadioButton.css";
+import "../../../styles/global.css";
+export interface RadioButtonProps {
+    label: string;
+    style?: "user" | "hybride";
+    isActive: boolean;
+    onClick: () => void;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

package/dist/components/atoms/radios/RadioButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./RadioButton.css";
+import "../../../styles/global.css";
+var RadioButton = function (_a) {
+    var label = _a.label, _b = _a.style, style = _b === void 0 ? "user" : _b, isActive = _a.isActive, onClick = _a.onClick;
+    return (React.createElement("button", { className: "radio-button radio-button-".concat(style, " ").concat(isActive ? "radio-button-".concat(style, "-active") : ""), onClick: onClick },
+        React.createElement("span", { className: "radio-button-icon" }, isActive && React.createElement("span", { className: "radio-button-icon-inner" })),
+        React.createElement("span", { className: "radio-button-label" }, label)));
+};
+export default RadioButton;

package/dist/components/atoms/radios/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from "./RadioButton";
+export type { RadioButtonProps } from "./RadioButton";

package/dist/components/atoms/radios/index.js

@@ -0,0 +1 @@
+export { default as RadioButton } from "./RadioButton";

package/dist/components/atoms/selects/Select.css

@@ -0,0 +1,103 @@
+.select-container {
+  position: relative;
+}
+
+.select {
+  display: flex;
+  width: 480px;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  cursor: pointer;
+}
+
+.select-text {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.select-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 4px;
+}
+
+.select-list {
+  display: none; /* Masquer par défaut */
+  flex-direction: column;
+  width: 480px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  border-radius: 8px;
+  margin-top: 8px;
+  padding: 8px 0;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  max-height: 600px;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+}
+
+.select-pressed .select-list {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.select-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.select-item:hover {
+  background: var(--venom-grey-dark, #d1dce8);
+}
+
+.select-item .select-item-icon {
+  margin-right: 11px;
+  visibility: hidden;
+  color: var(--bleu-allaw, #0070f3);
+}
+
+.select-item.selected .select-item-icon {
+  visibility: visible;
+}
+
+.select-item.single-select .select-item-icon {
+  display: none;
+}
+
+.select-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.error-message {
+  padding-top: 4px;
+  padding-left: 14px;
+}

package/dist/components/atoms/selects/Select.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./Select.css";
+import "../../../styles/global.css";
+export interface SelectItem {
+    label: string;
+    value: string;
+}
+export interface SelectProps<T extends string | string[]> {
+    items: SelectItem[];
+    selectedItem?: T;
+    placeholder?: string;
+    multiple?: boolean;
+    isRequired?: boolean;
+    showError?: boolean;
+    onChange?: (selected: T) => void;
+    onError?: (error: string) => void;
+}
+export interface SelectRef {
+    validate: () => boolean;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps<string | string[]> & React.RefAttributes<SelectRef>>;
+export default Select;

package/dist/components/atoms/selects/Select.js

@@ -0,0 +1,86 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
+import "./Select.css";
+import "../../../styles/global.css";
+import TinyInfo from "../typography/TinyInfo";
+var Select = forwardRef(function (_a, ref) {
+    var _b;
+    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;
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(multiple ? [] : selectedItem || ""), selected = _h[0], setSelected = _h[1];
+    var _j = useState(""), error = _j[0], setError = _j[1];
+    var selectRef = useRef(null);
+    useEffect(function () {
+        setSelected(multiple ? [] : selectedItem || "");
+    }, [selectedItem, multiple]);
+    var handleSelect = function (item) {
+        var newSelected;
+        if (multiple) {
+            newSelected = Array.isArray(selected)
+                ? selected.includes(item.value)
+                    ? selected.filter(function (i) { return i !== item.value; })
+                    : __spreadArray(__spreadArray([], selected, true), [item.value], false)
+                : [item.value];
+        }
+        else {
+            newSelected = item.value;
+            setIsOpen(false);
+        }
+        setSelected(newSelected);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelected);
+        validateSelect(newSelected);
+    };
+    var validateSelect = function (value) {
+        var isEmpty = value === "" || (Array.isArray(value) && value.length === 0);
+        var errorMessage = isRequired && isEmpty ? "Ce champ est requis" : "";
+        setError(errorMessage);
+        onError === null || onError === void 0 ? void 0 : onError(errorMessage);
+        // console.log(
+        //   `Select: Validation result - ${errorMessage ? "invalid" : "valid"}`
+        // );
+        return !errorMessage;
+    };
+    var toggleOpen = function () {
+        setIsOpen(!isOpen);
+    };
+    var handleClickOutside = function (event) {
+        if (selectRef.current &&
+            !selectRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(function () {
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        validate: function () { return validateSelect(selected); },
+    }); });
+    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : "") },
+        React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen },
+            React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
+                ? selected
+                    .map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
+                    .join(", ")
+                : !Array.isArray(selected) && selected
+                    ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
+                    : placeholder),
+            React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
+        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) ? "selected" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
+            multiple && (React.createElement("span", { className: "select-item-icon allaw-icon-check" })),
+            React.createElement("span", { className: "select-item-text" }, item.label))); }))),
+        isRequired && showError && error && (React.createElement("div", { className: "error-message" },
+            React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
+});
+Select.displayName = "Select";
+export default Select;

package/dist/components/atoms/selects/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Select";
+export type { SelectItem, SelectProps, SelectRef } from "./Select";

package/dist/components/atoms/selects/index.js

@@ -0,0 +1 @@
+export { default } from "./Select";

package/dist/components/atoms/tags/AppointementStatusTag.css

@@ -1,4 +1,7 @@
+@import "../../../styles/colors.css";
+
 .appointement-status-tag {
+  height: 32px;
   display: inline-block;
   border-radius: 8px;
   text-align: center;
@@ -21,37 +24,134 @@
   line-height: 16.34px;
 }
 
+/* Status confirmed */
 .status-confirmed {
-  background-color: #daf6e9;
-  color: #29a36a;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-green-light, #daf6e9);
+  color: var(--Tags-Vert, #29a36a);
 }
 
+/* Status pending */
 .status-pending {
-  background-color: #fdf2f2;
-  color: #e15151;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-red-light, #fdf2f2);
+  color: var(--Tags-Rouge, #e15151);
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
 }
 
+/* Status available */
 .status-available {
-  background-color: #daebfb;
-  color: #1985e8;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+/* Status unavailable */
+.status-unavailable {
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
 }
 
-.status-unavailable,
+/* Status cancelled */
 .status-cancelled {
-  background-color: #f4f7fb;
-  color: #728ea7;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
 }
 
+/* Status passed */
 .status-passed {
-  background-color: #dee8f2;
-  color: #728ea7;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-grey-light, #dee8f2);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
 }
 
+/* Status refused */
 .status-refused {
-  background-color: #646464;
-  color: white;
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #646464;
+  color: var(--Primary-Blanc, #fff);
+  text-align: right;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
 }
 
+/* Status cancelled-big */
 .status-cancelled-big {
   background-color: #fdf2f2;
   color: #e15151;

package/dist/components/atoms/tags/AppointementStatusTag.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./AppointementStatusTag.css";
-interface AppointementStatusTagProps {
+export interface AppointementStatusTagProps {
     status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
     variant?: "default" | "big";
 }

package/dist/components/atoms/tags/FolderStatusTag.css

@@ -0,0 +1,26 @@
+@import "../../../styles/colors.css";
+
+.folder-status-tag {
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-align: right;
+}
+
+.folder-status-tag.open {
+  background: var(--tag-green-light, #daf6e9);
+  color: var(--Tags-Vert, #29a36a);
+}
+
+.folder-status-tag.closed {
+  background: var(--tag-red-light, #fdf2f2);
+  color: var(--Tags-Rouge, #e15151);
+}

package/dist/components/atoms/tags/FolderStatusTag.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./FolderStatusTag.css";
+export interface FolderStatusTagProps {
+    isClosed?: boolean;
+}
+declare const FolderStatusTag: React.FC<FolderStatusTagProps>;
+export default FolderStatusTag;

package/dist/components/atoms/tags/FolderStatusTag.js

@@ -0,0 +1,8 @@
+import React from "react";
+import "./FolderStatusTag.css";
+var FolderStatusTag = function (_a) {
+    var _b = _a.isClosed, isClosed = _b === void 0 ? false : _b;
+    var label = isClosed ? "DOSSIER CLÔS" : "DOSSIER OUVERT";
+    return (React.createElement("div", { className: "folder-status-tag ".concat(isClosed ? "closed" : "open") }, label));
+};
+export default FolderStatusTag;

package/dist/components/atoms/tags/OtherStatusTag.css

@@ -0,0 +1,72 @@
+.other-status-tag {
+  height: 26px;
+  display: inline-flex;
+  padding: 8px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-align: center;
+}
+
+.other-status-tag.readonly {
+  background: var(--tag-white, #eef5fc);
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}
+
+.other-status-tag.editable {
+  height: 35px;
+  padding: 8px;
+  gap: 4px;
+  flex-shrink: 0;
+  border: 1px solid #000;
+  background: #fff;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.other-status-tag.editable:hover {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.other-status-tag.editable .icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding: 3.333px;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+}
+
+.other-status-tag.information {
+  height: 25px;
+  padding: 8px;
+  gap: 4px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--tag-blue, #1985e8);
+  color: var(--tag-blue, #1985e8);
+  text-align: center;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.12px;
+}
+
+.other-status-tag.information .icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding: 3.333px;
+  justify-content: center;
+  align-items: center;
+}

package/dist/components/atoms/tags/OtherStatusTag.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./OtherStatusTag.css";
+export interface OtherStatusTagProps {
+    label?: string;
+    type?: "readonly" | "editable" | "information";
+    startIcon?: boolean;
+    startIconName?: string;
+}
+declare const OtherStatusTag: React.FC<OtherStatusTagProps>;
+export default OtherStatusTag;

package/dist/components/atoms/tags/OtherStatusTag.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./OtherStatusTag.css";
+var OtherStatusTag = function (_a) {
+    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;
+    return (React.createElement("div", { className: "other-status-tag ".concat(type) },
+        type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
+        label,
+        type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));
+};
+export default OtherStatusTag;

package/dist/components/atoms/tags/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AppointementStatusTag } from "./AppointementStatusTag";
+export { default as FolderStatusTag } from "./FolderStatusTag";
+export { default as OtherStatusTag } from "./OtherStatusTag";
+export type { AppointementStatusTagProps } from "./AppointementStatusTag";
+export type { FolderStatusTagProps } from "./FolderStatusTag";
+export type { OtherStatusTagProps } from "./OtherStatusTag";

package/dist/components/atoms/tags/index.js

@@ -0,0 +1,3 @@
+export { default as AppointementStatusTag } from "./AppointementStatusTag";
+export { default as FolderStatusTag } from "./FolderStatusTag";
+export { default as OtherStatusTag } from "./OtherStatusTag";