allaw-ui 0.0.19 → 0.0.34

package/dist/components/atoms/buttons/SecondaryButton.css

@@ -0,0 +1,124 @@
+@import "../../../styles/colors.css";
+
+.secondary-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: auto;
+  height: 42px;
+  padding: 1rem 1.3rem;
+  border-radius: 24px;
+  border: 2px solid var(--noir);
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    opacity 0.2s,
+    color 0.2s;
+}
+
+.secondary-button-enabled {
+  background-color: transparent;
+  transition: color 0.2s;
+}
+
+.secondary-button-enabled:hover {
+  color: #25beeb;
+}
+
+.secondary-button-enabled:active {
+  color: var(--dark-grey);
+  opacity: 1;
+}
+
+.secondary-button-enabled:active .secondary-button-icon {
+  color: var(--dark-grey);
+}
+
+.secondary-button-disabled {
+  background-color: #b9b9b9;
+  opacity: 0.5;
+  color: #9b9b9b;
+  cursor: not-allowed;
+}
+
+.secondary-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--noir);
+  transition: color 0.2s;
+}
+
+.secondary-button-enabled:hover .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0em;
+}
+
+/* Styles pour le mode dark */
+.secondary-button-dark {
+  color: var(--noir);
+}
+
+.secondary-button-dark:hover {
+  background-color: var(--noir);
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-dark:active {
+  color: var(--dark-grey);
+}
+
+.secondary-button-dark .secondary-button-icon {
+  color: var(--noir);
+}
+
+.secondary-button-dark:hover .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-dark:active .secondary-button-icon {
+  color: var(--dark-grey);
+}
+
+/* Styles pour le mode light */
+.secondary-button-light {
+  background-color: transparent;
+  border: 2px solid var(--pure-white);
+  color: var(--pure-white);
+}
+
+.secondary-button-light:hover {
+  background-color: var(--grey-light);
+  color: var(--noir);
+}
+
+.secondary-button-light:active {
+  background-color: var(--grey-light);
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-light .secondary-button-icon {
+  color: var(--pure-white);
+}
+
+.secondary-button-light:hover .secondary-button-icon {
+  color: var(--noir);
+}
+
+.secondary-button-light:active .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-full-width {
+  width: 100%;
+}

package/dist/components/atoms/buttons/SecondaryButton.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./SecondaryButton.css";
+import "../../../styles/global.css";
+export interface SecondaryButtonProps {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    label: string;
+    disabled?: boolean;
+    mode?: "dark" | "light";
+    onClick?: () => void;
+    fullWidth?: boolean;
+}
+declare const SecondaryButton: React.FC<SecondaryButtonProps>;
+export default SecondaryButton;

package/dist/components/atoms/buttons/SecondaryButton.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./SecondaryButton.css";
+import "../../../styles/global.css";
+var SecondaryButton = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d;
+    return (React.createElement("button", { className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : ""), disabled: disabled, onClick: onClick },
+        startIcon && React.createElement("span", { className: "secondary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "secondary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIcon) })));
+};
+export default SecondaryButton;

package/dist/components/atoms/buttons/TabNavigation.css

@@ -0,0 +1,43 @@
+.tab-navigation {
+  display: inline-flex;
+  align-items: flex-start;
+}
+
+.tab-item {
+  display: flex;
+  padding: 0px 16px 10px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+}
+
+.tab-item.active {
+  border-bottom: 2px solid #000;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.tab-item.inactive {
+  border-bottom: 1px solid var(--light-grey, #728ea7);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+}
+
+.tab-label {
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+}
+
+.tab-notification-dot {
+  width: 5px;
+  height: 5px;
+  background-color: #ef1a1a;
+  border-radius: 50%;
+  position: absolute;
+  top: 3px;
+  right: 6px;
+}

package/dist/components/atoms/buttons/TabNavigation.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./TabNavigation.css";
+import "../../../styles/global.css";
+export interface TabNavigationProps {
+    tabs: {
+        label: string;
+        isActive: boolean;
+        hasNotification: boolean;
+    }[];
+    onTabClick: (index: number) => void;
+}
+declare const TabNavigation: React.FC<TabNavigationProps>;
+export default TabNavigation;

package/dist/components/atoms/buttons/TabNavigation.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TabNavigation.css";
+import "../../../styles/global.css";
+var TabNavigation = function (_a) {
+    var tabs = _a.tabs, onTabClick = _a.onTabClick;
+    return (React.createElement("div", { className: "tab-navigation" }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
+        React.createElement("span", { className: "tab-label" }, tab.label),
+        tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
+};
+export default TabNavigation;

package/dist/components/atoms/buttons/TertiaryButton.css

@@ -0,0 +1,63 @@
+@import "../../../styles/colors.css";
+
+.tertiary-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-bottom 0.15s; /* Ajout de la transition de 0.15s */
+}
+
+.tertiary-button-default {
+  border-bottom: 1px solid var(--primary-black, #171e25);
+  color: var(--primary-black, #171e25);
+}
+
+.tertiary-button-default:hover {
+  color: var(--primary-black, #171e25);
+  border-bottom: none; /* Suppression de la border-bottom au hover */
+}
+
+.tertiary-button-variant {
+  display: flex;
+  justify-content: center;
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}
+
+.tertiary-button-variant:hover {
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}
+
+.tertiary-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 3.333px;
+}
+
+.tertiary-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+}
+
+/* Styles spécifiques pour variant=false */
+.tertiary-button-default .tertiary-button-label {
+  font-weight: 700; /* Bold */
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+/* Styles spécifiques pour variant=true */
+.tertiary-button-variant .tertiary-button-label {
+  font-weight: 400; /* Normal */
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}

package/dist/components/atoms/buttons/TertiaryButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+export interface TertiaryButtonProps {
+    startIcon?: React.ReactNode;
+    label: string;
+    variant?: boolean;
+}
+declare const TertiaryButton: React.FC<TertiaryButtonProps>;
+export default TertiaryButton;

package/dist/components/atoms/buttons/TertiaryButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+var TertiaryButton = function (_a) {
+    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b;
+    return (React.createElement("button", { className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default") },
+        startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "tertiary-button-label" }, label)));
+};
+export default TertiaryButton;

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

@@ -0,0 +1,22 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
+export type { FavoriteToggleProps } from "./FavoriteToggle";
+export type { FilterButtonProps } from "./FilterButton";
+export type { GhostButtonProps } from "./GhostButton";
+export type { IconButtonProps } from "./IconButton";
+export type { PendingDocumentsProps } from "./PendingDocuments";
+export type { PrimaryButtonProps } from "./PrimaryButton";
+export type { SecondaryButtonProps } from "./SecondaryButton";
+export type { TabNavigationProps } from "./TabNavigation";
+export type { TertiaryButtonProps } from "./TertiaryButton";
+export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
+export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";

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

@@ -0,0 +1,11 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+export { default as PendingDocuments } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";

package/dist/components/atoms/checkboxes/Checkbox.css

@@ -0,0 +1,50 @@
+.checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.checkbox-default {
+  border: 2px solid var(--noir);
+  border-radius: 1.92px;
+}
+
+.checkbox-pressed {
+  border: 2px solid var(--noir);
+  border-radius: 1.92px;
+}
+
+.checkbox-pressed .checkbox-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 15px;
+  padding-left: 1px;
+  padding-bottom: 2px;
+}
+
+.checkbox-black {
+  border-color: var(--noir);
+  color: var(--noir);
+}
+
+.checkbox-white {
+  border-color: var(--pure-white);
+  color: var(--pure-white);
+}
+
+.checkbox-icon-black {
+  color: var(--noir);
+}
+
+.checkbox-icon-white {
+  color: var(--pure-white);
+}

package/dist/components/atoms/checkboxes/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Checkbox.css";
+import "../../../styles/global.css";
+export interface CheckboxProps {
+    id?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    isWhite?: boolean;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Checkbox.css";
+import "../../../styles/global.css";
+var Checkbox = function (_a) {
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.isWhite, isWhite = _c === void 0 ? false : _c;
+    var handleClick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+    return (React.createElement("button", { id: id, className: "checkbox ".concat(checked ? "checkbox-pressed" : "checkbox-default", " ").concat(isWhite ? "checkbox-white" : "checkbox-black"), onClick: handleClick }, checked && (React.createElement("span", { className: "checkbox-icon allaw-icon-close ".concat(isWhite ? "checkbox-icon-white" : "checkbox-icon-black") }))));
+};
+export default Checkbox;

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

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

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

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

package/dist/components/atoms/filter/Basefiler.css

@@ -0,0 +1,80 @@
+.backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background: linear-gradient(180deg, rgba(26, 50, 56, 0.00) 0%, rgba(2, 9, 11, 0.45) 100%);
+    z-index: 1000;
+}
+
+.baseFilter {
+    position: relative;
+    width: fit-content;
+}
+
+.options {
+    position: absolute;
+    top: 120%;
+    left: 0;
+    width: fit-content;
+    border: 0.5px solid #ddd;
+    border-radius: 4px;
+    background-color: #ffffff;
+    box-shadow: rgba(9, 30, 66, 0.15) 0px 8px 12px 0px;
+    z-index: 2000;
+    padding: 0.4rem 0rem;
+}
+
+.item {
+    background: none;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-left: 2px solid #FFF;
+    width: 100%;
+    color: #0000
+}
+
+.round {
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #D1DCE7;
+    border-radius: 3rem;
+    padding: 2px;
+}
+
+.selected {
+    background-color: #25BEEB;
+    min-width: 0.6rem;
+    min-height: 0.6rem;
+    border-radius: 1rem;
+    display: block;
+}
+
+.notSelected {
+    background-color: #FFF;
+    min-width: 0.6rem;
+    min-height: 0.6rem;
+    border-radius: 1rem;
+    display: block;
+}
+
+.item > span {
+    text-wrap: nowrap;
+    font-family: var(--font-open-sans);
+    font-size: 14px;
+    font-weight: 500;
+    color: #000;
+}
+
+.item:hover {
+    background-color: #EFF2F5;
+    border-left: 2px solid #25BEEB;
+}

package/dist/components/atoms/filter/Filter.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import "./Basefiler.css";
+export type FilterProps = {
+    tooltipContent: string;
+    tooltipId: string;
+    showIcon: boolean;
+    defaultSelectedValues?: string[];
+    filterData: {
+        value: string;
+        name: string;
+    }[];
+    setFilters: any;
+    multiselect?: boolean;
+    iconName?: string;
+    children?: any;
+    props?: any;
+    required?: boolean;
+    showNumIndic?: boolean;
+    showBackdrop?: boolean;
+    isStatusTag?: boolean;
+};
+declare function BaseFilter({ tooltipContent, tooltipId, showNumIndic, required, isStatusTag, defaultSelectedValues, filterData, multiselect, setFilters, showIcon, iconName, showBackdrop, children, ...props }: FilterProps): React.JSX.Element;
+export default BaseFilter;

package/dist/components/atoms/filter/Filter.js

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 } from "react";
+import "./Basefiler.css";
+import { AppointementStatusTag } from "../tags";
+import { FilterButtonPrimary } from "../buttons";
+function BaseFilter(_a) {
+    var tooltipContent = _a.tooltipContent, tooltipId = _a.tooltipId, _b = _a.showNumIndic, showNumIndic = _b === void 0 ? true : _b, _c = _a.required, required = _c === void 0 ? true : _c, isStatusTag = _a.isStatusTag, defaultSelectedValues = _a.defaultSelectedValues, filterData = _a.filterData, _d = _a.multiselect, multiselect = _d === void 0 ? false : _d, setFilters = _a.setFilters, showIcon = _a.showIcon, iconName = _a.iconName, _e = _a.showBackdrop, showBackdrop = _e === void 0 ? false : _e, children = _a.children, props = __rest(_a, ["tooltipContent", "tooltipId", "showNumIndic", "required", "isStatusTag", "defaultSelectedValues", "filterData", "multiselect", "setFilters", "showIcon", "iconName", "showBackdrop", "children"]);
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = useState(defaultSelectedValues ? defaultSelectedValues : []), selectedValues = _g[0], setSelectedValues = _g[1];
+    var handleButtonTap = function () {
+        isOpen ? handleClose() : setIsOpen(true);
+    };
+    var selectItem = function (value) {
+        if (multiselect) {
+            if (selectedValues &&
+                selectedValues.length > 0 &&
+                selectedValues.includes(value)) {
+                if (required && selectedValues.length == 1) {
+                    return;
+                }
+                setSelectedValues(function (prevItems) {
+                    return prevItems.filter(function (item) { return item !== value; });
+                });
+            }
+            else {
+                setSelectedValues(function (prevItems) { return __spreadArray(__spreadArray([], prevItems, true), [value], false); });
+            }
+        }
+        else {
+            setSelectedValues(value);
+            handleClose([value]);
+        }
+    };
+    var handleClose = function (values) {
+        setFilters(values ? values : selectedValues);
+        setIsOpen(false);
+    };
+    var Item = function (_a) {
+        var name = _a.name, value = _a.value;
+        return (React.createElement("button", { className: "item", onClick: function () { return selectItem(value); } },
+            React.createElement("div", { className: "round" },
+                React.createElement("div", { className: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value))
+                        ? "selected"
+                        : "notSelected" })),
+            isStatusTag ? (React.createElement(AppointementStatusTag, { status: value })) : (React.createElement("span", null, name))));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: "baseFilter" }, props),
+            React.createElement(FilterButtonPrimary, { onClick: function () { return handleButtonTap(); }, zIndex: isOpen ? "2000" : "+1" },
+                children,
+                React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValues.length, ")"))),
+            isOpen && (React.createElement("div", { className: "options" }, filterData &&
+                (filterData === null || filterData === void 0 ? void 0 : filterData.length) > 0 &&
+                filterData.map(function (item, idx) { return (React.createElement(Item, { name: item === null || item === void 0 ? void 0 : item.name, value: item === null || item === void 0 ? void 0 : item.value, key: idx })); })))),
+        isOpen && showBackdrop && (React.createElement("div", { className: "backdrop", onClick: function () { return handleClose(); } }))));
+}
+export default BaseFilter;

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

@@ -0,0 +1,2 @@
+export { default } from "./Filter";
+export type { FilterProps } from "./Filter";

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

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