allaw-ui 4.2.1 → 4.2.3

package/dist/components/molecules/modal/Modal.d.ts

@@ -49,6 +49,7 @@ export interface ModalProps {
         left?: number;
         right?: number;
     };
+    confirmDisabled?: boolean;
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/components/molecules/modal/Modal.js

@@ -26,7 +26,7 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import Heading from "../../atoms/typography/Heading";
 import Paragraph from "../../atoms/typography/Paragraph";
 var Modal = function (_a) {
-    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, maxWidthConfig = _a.maxWidthConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, children = _a.children, customContent = _a.customContent, renderContent = _a.renderContent, maxWidthConfig = _a.maxWidthConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset, confirmDisabled = _a.confirmDisabled;
     var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
     var _e = useState(false), imgError = _e[0], setImgError = _e[1];
     var portalContainerRef = useRef(null);
@@ -106,7 +106,7 @@ var Modal = function (_a) {
                     React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))),
             React.createElement("footer", { className: style.modalFooter },
                 cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
-                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true }))));
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true, disabled: confirmDisabled }))));
     };
     // Générer les styles pour la largeur maximale responsive
     var getMaxWidthStyles = function () {

package/dist/components/molecules/segmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface Option {
+    id: string;
+    label: string;
+    shortLabel?: string;
+    icon?: React.ReactNode | ((size: number) => React.ReactNode) | string;
+    iconClass?: string;
+    iconSize?: number;
+}
+export interface SegmentedControlProps {
+    options: Option[];
+    value: string;
+    onChange: (id: string) => void;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    fullWidth?: boolean;
+    className?: string;
+}
+declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export default SegmentedControl;

package/dist/components/molecules/segmentedControl/SegmentedControl.js

@@ -0,0 +1,128 @@
+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, { useRef, useEffect } from "react";
+import styles from "./segmentedControl.module.css";
+var MAX_OPTIONS = 5;
+var minWidths = { sm: 56, md: 80, lg: 104 };
+var SegmentedControl = function (_a) {
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? "" : _e;
+    var displayedOptions = options.length > MAX_OPTIONS
+        ? (console.warn("SegmentedControl: maximum 5 options supportées. Les options supplémentaires seront ignorées."),
+            options.slice(0, MAX_OPTIONS))
+        : options;
+    var containerRef = useRef(null);
+    var segmentRefs = useRef([]);
+    var _f = React.useState(false), vertical = _f[0], setVertical = _f[1];
+    var _g = React.useState(displayedOptions.findIndex(function (o) { return o.id === value; })), focusIndex = _g[0], setFocusIndex = _g[1];
+    var _h = React.useState(function () {
+        return displayedOptions.map(function () { return false; });
+    }), showShortLabel = _h[0], setShowShortLabel = _h[1];
+    // Responsive: vertical si largeur < 480px et !fullWidth
+    useEffect(function () {
+        if (!fullWidth) {
+            var handleResize_1 = function () {
+                setVertical(window.innerWidth < 400);
+            };
+            handleResize_1();
+            window.addEventListener("resize", handleResize_1);
+            return function () { return window.removeEventListener("resize", handleResize_1); };
+        }
+        else {
+            setVertical(false);
+            return undefined;
+        }
+    }, [fullWidth]);
+    // ResizeObserver pour chaque segment (label court/long)
+    useEffect(function () {
+        if (typeof window === "undefined" || !window.ResizeObserver)
+            return;
+        var observers = [];
+        displayedOptions.forEach(function (_, i) {
+            var el = segmentRefs.current[i];
+            if (!el)
+                return;
+            var observer = new ResizeObserver(function (entries) {
+                var _loop_1 = function (entry) {
+                    var minWidth = minWidths[size];
+                    setShowShortLabel(function (prev) {
+                        var next = __spreadArray([], prev, true);
+                        next[i] = entry.contentRect.width < minWidth;
+                        return next;
+                    });
+                };
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    _loop_1(entry);
+                }
+            });
+            observer.observe(el);
+            observers.push(observer);
+        });
+        return function () { return observers.forEach(function (o) { return o.disconnect(); }); };
+    }, [displayedOptions, size]);
+    // Gestion clavier
+    var handleKeyDown = function (e) {
+        var _a, _b;
+        if (disabled)
+            return;
+        var idx = focusIndex;
+        if (e.key === "ArrowRight" || (vertical && e.key === "ArrowDown")) {
+            idx = (idx + 1) % displayedOptions.length;
+            setFocusIndex(idx);
+            (_a = segmentRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus();
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowLeft" || (vertical && e.key === "ArrowUp")) {
+            idx = (idx - 1 + displayedOptions.length) % displayedOptions.length;
+            setFocusIndex(idx);
+            (_b = segmentRefs.current[idx]) === null || _b === void 0 ? void 0 : _b.focus();
+            e.preventDefault();
+        }
+        else if (e.key === " " || e.key === "Enter") {
+            onChange(displayedOptions[idx].id);
+            e.preventDefault();
+        }
+    };
+    // Focus cyclique/tabIndex
+    useEffect(function () {
+        setFocusIndex(displayedOptions.findIndex(function (o) { return o.id === value; }));
+    }, [value, displayedOptions]);
+    return (React.createElement("div", { ref: containerRef, className: [
+            styles.container,
+            vertical ? styles.vertical : "",
+            fullWidth ? styles.fullWidth : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), role: "radiogroup", "aria-disabled": disabled, tabIndex: -1, onKeyDown: handleKeyDown }, displayedOptions.map(function (opt, i) { return (React.createElement("button", { key: opt.id, ref: function (el) { return (segmentRefs.current[i] = el); }, type: "button", className: [
+            styles.segment,
+            styles[size],
+            value === opt.id ? styles.selected : "",
+            disabled ? styles.disabled : "",
+            focusIndex === i ? styles.focus : "",
+        ]
+            .filter(Boolean)
+            .join(" "), role: "radio", "aria-checked": value === opt.id, tabIndex: value === opt.id ? 0 : -1, disabled: disabled, onClick: function () { return !disabled && onChange(opt.id); } },
+        opt.icon && (React.createElement("span", { className: styles["segmented-control-icon"], style: { fontSize: opt.iconSize || 24 } }, typeof opt.icon === "function" ? (opt.icon(opt.iconSize || 24)) : typeof opt.icon === "string" ? (opt.icon === "allaw-icon-google" ? (React.createElement("span", { className: "allaw-icon-google" },
+            React.createElement("span", { className: "path1" }),
+            React.createElement("span", { className: "path2" }),
+            React.createElement("span", { className: "path3" }),
+            React.createElement("span", { className: "path4" }))) : opt.icon === "allaw-icon-google-calendar" ? (React.createElement("span", { className: "allaw-icon-google-calendar" },
+            React.createElement("span", { className: "path1" }),
+            React.createElement("span", { className: "path2" }),
+            React.createElement("span", { className: "path3" }),
+            React.createElement("span", { className: "path4" }),
+            React.createElement("span", { className: "path5" }),
+            React.createElement("span", { className: "path6" }),
+            React.createElement("span", { className: "path7" }),
+            React.createElement("span", { className: "path8" }))) : opt.icon.startsWith("allaw-icon-") ? (React.createElement("i", { className: opt.icon })) : null) : (opt.icon))),
+        React.createElement("span", { className: styles["segmented-control-label"] }, showShortLabel[i] && opt.shortLabel ? opt.shortLabel : opt.label))); })));
+};
+export default SegmentedControl;

package/dist/components/molecules/segmentedControl/index.d.ts

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

package/dist/components/molecules/segmentedControl/index.js

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

package/dist/components/molecules/segmentedControl/segmentedControl.module.css

@@ -0,0 +1,112 @@
+.container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0;
+  background: #f6f7fa;
+  border: 1px solid #e6e8ec;
+  border-radius: 14px;
+  padding: 2px;
+  position: relative;
+}
+
+.segment {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1.5px solid transparent;
+  outline: none;
+  background: transparent;
+  color: #7d8597;
+  font-weight: 600;
+  font-size: 16px;
+  height: 48px;
+  padding: 0 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background 150ms, color 150ms, box-shadow 150ms, border 150ms;
+  position: relative;
+  z-index: 1;
+  box-shadow: none;
+  user-select: none;
+}
+
+.selected {
+  background: #fff;
+  color: #171e25;
+  box-shadow: 0 2px 8px 0 rgba(31, 41, 55, 0.06);
+  border: 1.5px solid #e6e8ec;
+  z-index: 2;
+}
+
+.segment:not(.selected):hover:not(.disabled) {
+  background: rgba(230, 232, 236, 0.18);
+  color: #171e25;
+}
+
+.focus {
+  /* outline: 2px solid #25beeb; */
+  outline-offset: 0;
+  border-radius: 12px;
+  z-index: 3;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.vertical {
+  flex-direction: column;
+  border-radius: 12px;
+}
+
+/* Tailles */
+.sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+.md {
+  height: 48px;
+  padding: 0 20px;
+  font-size: 16px;
+}
+.lg {
+  height: 48px;
+  padding: 0 28px;
+  font-size: 18px;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.segmented-control-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  color: inherit;
+  font-size: 18px;
+}
+
+.segmented-control-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+}
+
+@media (max-width: 400px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-wrap: nowrap;
+    border-radius: 14px;
+  }
+  .segment {
+    width: 100%;
+    border-radius: 14px;
+  }
+}

package/dist/components/molecules/segmentedControl/segmentedControl.stories.d.ts

@@ -0,0 +1,70 @@
+declare namespace _default {
+    export let title: string;
+    export { SegmentedControl as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace size {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace fullWidth {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace disabled {
+            let control_2: string;
+            export { control_2 as control };
+        }
+    }
+}
+export default _default;
+export const Small: any;
+export const Medium: any;
+export const Large: any;
+export const FullWidth: any;
+export const Disabled: any;
+export function Responsive(args: any): React.JSX.Element;
+export namespace Responsive {
+    namespace args {
+        export { baseOptions as options };
+        export let value: string;
+        let size_1: string;
+        export { size_1 as size };
+        let fullWidth_1: boolean;
+        export { fullWidth_1 as fullWidth };
+    }
+}
+export const CalendarIcons: any;
+export const ContentWidth: any;
+export const Default: any;
+export function ResponsiveColumn(args: any): React.JSX.Element;
+export namespace ResponsiveColumn {
+    export namespace args_1 {
+        let options_1: {
+            id: string;
+            label: string;
+            icon: string;
+            iconSize: number;
+            shortLabel: string;
+        }[];
+        export { options_1 as options };
+        let value_1: string;
+        export { value_1 as value };
+        let size_2: string;
+        export { size_2 as size };
+        let fullWidth_2: boolean;
+        export { fullWidth_2 as fullWidth };
+    }
+    export { args_1 as args };
+}
+import SegmentedControl from "./SegmentedControl";
+import React from "react";
+declare const baseOptions: {
+    id: string;
+    label: string;
+    icon: string;
+    iconSize: number;
+    shortLabel: string;
+}[];

package/dist/components/molecules/segmentedControl/segmentedControl.stories.js

@@ -0,0 +1,185 @@
+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);
+};
+import React, { useState } from "react";
+import SegmentedControl from "./SegmentedControl";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/SegmentedControl",
+    component: SegmentedControl,
+    tags: ["autodocs"],
+    argTypes: {
+        size: { control: { type: "select", options: ["sm", "md", "lg"] } },
+        fullWidth: { control: "boolean" },
+        disabled: { control: "boolean" },
+    },
+};
+var baseOptions = [
+    {
+        id: "google",
+        label: "Google",
+        icon: "allaw-icon-google",
+        iconSize: 24,
+        shortLabel: "G",
+    },
+    {
+        id: "linkedin",
+        label: "LinkedIn",
+        icon: "allaw-icon-linkedin",
+        iconSize: 24,
+        shortLabel: "In",
+    },
+    {
+        id: "user",
+        label: "Utilisateur",
+        icon: "allaw-icon-user",
+        iconSize: 24,
+        shortLabel: "U",
+    },
+];
+var calendarOptions = [
+    {
+        id: "googlecal",
+        label: "Google Calendar",
+        icon: "allaw-icon-google-calendar",
+        iconSize: 24,
+        shortLabel: "GCal",
+    },
+    {
+        id: "microsoft",
+        label: "Microsoft",
+        icon: "allaw-icon-microsoft",
+        iconSize: 24,
+        shortLabel: "MS",
+    },
+    {
+        id: "user",
+        label: "Utilisateur",
+        icon: "allaw-icon-user",
+        iconSize: 24,
+        shortLabel: "U",
+    },
+];
+var Template = function (args) {
+    var _a = useState(args.value || args.options[0].id), value = _a[0], setValue = _a[1];
+    return React.createElement(SegmentedControl, __assign({}, args, { value: value, onChange: setValue }));
+};
+export var Small = Template.bind({});
+Small.args = {
+    options: baseOptions,
+    value: "google",
+    size: "sm",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    options: baseOptions,
+    value: "linkedin",
+    size: "md",
+};
+export var Large = Template.bind({});
+Large.args = {
+    options: baseOptions,
+    value: "user",
+    size: "lg",
+};
+export var FullWidth = Template.bind({});
+FullWidth.args = {
+    options: baseOptions,
+    value: "google",
+    size: "md",
+    fullWidth: true,
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    options: baseOptions,
+    value: "google",
+    size: "md",
+    disabled: true,
+};
+export var Responsive = function (args) {
+    var _a = useState(args.value || args.options[0].id), value = _a[0], setValue = _a[1];
+    return (React.createElement("div", { style: { maxWidth: 280, border: "1px dashed #ccc", padding: 8 } },
+        React.createElement(SegmentedControl, __assign({}, args, { value: value, onChange: setValue }))));
+};
+Responsive.args = {
+    options: baseOptions,
+    value: "google",
+    size: "md",
+    fullWidth: false,
+};
+export var CalendarIcons = Template.bind({});
+CalendarIcons.args = {
+    options: calendarOptions,
+    value: "googlecal",
+    size: "md",
+};
+export var ContentWidth = Template.bind({});
+ContentWidth.args = {
+    options: baseOptions,
+    value: "google",
+    size: "md",
+    fullWidth: false,
+};
+export var Default = Template.bind({});
+Default.args = {
+    options: [
+        {
+            id: "googlecal",
+            label: "Google Calendar",
+            icon: "allaw-icon-google-calendar",
+            iconSize: 24,
+            shortLabel: "GCal",
+        },
+        {
+            id: "microsoft",
+            label: "Microsoft Outlook",
+            icon: "allaw-icon-microsoft-outlook",
+            iconSize: 24,
+            shortLabel: "Outlook",
+        },
+    ],
+    value: "googlecal",
+    size: "md",
+    fullWidth: false,
+};
+export var ResponsiveColumn = function (args) {
+    var _a = React.useState(args.value || args.options[0].id), value = _a[0], setValue = _a[1];
+    return (React.createElement("div", { style: { maxWidth: 350, border: "1px dashed #ccc", padding: 8 } },
+        React.createElement(SegmentedControl, __assign({}, args, { value: value, onChange: setValue }))));
+};
+ResponsiveColumn.args = {
+    options: [
+        {
+            id: "googlecal",
+            label: "Google Calendar",
+            icon: "allaw-icon-google-calendar",
+            iconSize: 24,
+            shortLabel: "GCal",
+        },
+        {
+            id: "microsoft",
+            label: "Microsoft Outlook",
+            icon: "allaw-icon-microsoft-outlook",
+            iconSize: 24,
+            shortLabel: "Outlook",
+        },
+        {
+            id: "user",
+            label: "Utilisateur",
+            icon: "allaw-icon-user",
+            iconSize: 24,
+            shortLabel: "U",
+        },
+    ],
+    value: "googlecal",
+    size: "md",
+    fullWidth: false,
+};

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as Button, default as PrimaryButton, } from "./components/atoms
 export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
 export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
 export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
+export { default as SegmentedControl } from "./components/molecules/segmentedControl/SegmentedControl";
+export type { SegmentedControlProps } from "./components/molecules/segmentedControl/SegmentedControl";
 export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
 export { default as Fitler } from "./components/atoms/filter/Filter";
 export { default as Input } from "./components/atoms/inputs/Input";

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as Button, default as PrimaryButton, } from "./components/atoms
 export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
 export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
 export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
+export { default as SegmentedControl } from "./components/molecules/segmentedControl/SegmentedControl";
 // Checkboxes
 export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
 // Fitler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",