allaw-ui 1.1.1 → 2.0.0

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

@@ -0,0 +1,75 @@
+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 RadioButton from "./RadioButton";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/Radios/RadioButton",
+    component: RadioButton,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        style: {
+            control: {
+                type: "radio",
+                options: ["user", "hybride"],
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        setIsActive(!isActive);
+        args.onClick();
+    };
+    return React.createElement(RadioButton, __assign({}, args, { isActive: isActive, onClick: handleClick }));
+};
+export var UserDefault = Template.bind({});
+UserDefault.args = {
+    label: "Option 2",
+    style: "user",
+    isActive: false,
+};
+export var UserActive = Template.bind({});
+UserActive.args = {
+    label: "Option 2",
+    style: "user",
+    isActive: true,
+};
+export var HybrideDefault = Template.bind({});
+HybrideDefault.args = {
+    label: "Option 2",
+    style: "hybride",
+    isActive: false,
+};
+export var HybrideActive = Template.bind({});
+HybrideActive.args = {
+    label: "Option 2",
+    style: "hybride",
+    isActive: true,
+};

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

@@ -33,7 +33,7 @@
   cursor: pointer;
   outline: none;
   font-family: "Open Sans";
-  font-size: 14px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

package/dist/components/atoms/selects/ComboBox.stories.d.ts

@@ -0,0 +1,94 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { ComboBox as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export let args: {};
+    export namespace argTypes {
+        export namespace items {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace placeholder {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export namespace isRequired {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export namespace selectedItem {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export namespace onChange {
+            namespace table {
+                let disable: boolean;
+            }
+        }
+        export namespace width {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+                export let min: number;
+                export let max: number;
+            }
+            export { control_4 as control };
+        }
+        export namespace openOnMount {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        export namespace title_1 {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        export { title_1 as title };
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+        namespace viewport {
+            namespace viewports {
+                namespace responsive {
+                    let name: string;
+                    namespace styles {
+                        let height: string;
+                    }
+                }
+            }
+            let defaultViewport: string;
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Pressed: any;
+export const Required: any;
+export const CustomWidth: any;
+export const OpenOnMount: any;
+import ComboBox from "./ComboBox";

package/dist/components/atoms/selects/ComboBox.stories.js

@@ -0,0 +1,122 @@
+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);
+};
+// ComboBox.stories.jsx
+import React, { useState } from "react";
+import ComboBox from "./ComboBox";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/selects/ComboBox",
+    component: ComboBox,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        items: {
+            control: {
+                type: "array",
+            },
+        },
+        placeholder: {
+            control: {
+                type: "text",
+            },
+        },
+        isRequired: {
+            control: {
+                type: "boolean",
+            },
+        },
+        selectedItem: {
+            control: {
+                type: "text",
+            },
+        },
+        onChange: {
+            table: {
+                disable: true,
+            },
+        },
+        width: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 100,
+            },
+        },
+        openOnMount: {
+            control: {
+                type: "boolean",
+            },
+        },
+        title: {
+            control: {
+                type: "text",
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+        viewport: {
+            viewports: {
+                responsive: {
+                    name: "Responsive",
+                    styles: {
+                        height: "360px",
+                    },
+                },
+            },
+            defaultViewport: "responsive",
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.selectedItem), selected = _a[0], setSelected = _a[1];
+    var handleChange = function (newSelected) {
+        setSelected(newSelected);
+    };
+    return React.createElement(ComboBox, __assign({}, args, { selectedItem: selected, onChange: handleChange }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "lundi-12-aout", // Élément sélectionné par défaut
+    placeholder: "Sélectionner...",
+    isRequired: false,
+    width: 100,
+    openOnMount: true,
+    title: "Sélectionnez une date",
+};
+export var Pressed = Template.bind({});
+Pressed.args = __assign(__assign({}, Default.args), { selectedItem: "lundi-12-aout" });
+export var Required = Template.bind({});
+Required.args = __assign(__assign({}, Default.args), { isRequired: true });
+export var CustomWidth = Template.bind({});
+CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
+export var OpenOnMount = Template.bind({});
+OpenOnMount.args = __assign(__assign({}, Default.args), { openOnMount: true });

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

@@ -1,5 +1,4 @@
 import React from "react";
-import "./Select.css";
 import "../../../styles/global.css";
 export interface SelectItem {
     label: string;

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

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
 import ReactDOM from "react-dom";
-import "./Select.css";
+import styles from "./Select.module.css";
 import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
@@ -25,12 +25,13 @@ function Select(_a, ref) {
         left: 0,
         width: 0,
     }), listPosition = _l[0], setListPosition = _l[1];
+    var _m = useState("bottom"), placement = _m[0], setPlacement = _m[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
     useEffect(function () {
         if (!multiple && selectedItem && isOpen && listRef.current) {
-            var selectedItemElement = listRef.current.querySelector(".select-item[data-value=\"".concat(selectedItem, "\"]"));
+            var selectedItemElement = listRef.current.querySelector(".".concat(styles.selectItem, "[data-value=\"").concat(selectedItem, "\"]"));
             if (selectedItemElement instanceof HTMLElement) {
                 var listHeight = listRef.current.offsetHeight;
                 var itemHeight = selectedItemElement.offsetHeight;
@@ -64,20 +65,32 @@ function Select(_a, ref) {
         return !errorMessage;
     };
     var updateListPosition = function () {
-        if (selectRef.current) {
-            var rect = selectRef.current.getBoundingClientRect();
+        if (selectRef.current && listRef.current) {
+            var selectRect = selectRef.current.getBoundingClientRect();
+            var listHeight = listRef.current.getBoundingClientRect().height;
+            var windowHeight = window.innerHeight;
+            var spaceBelow = windowHeight - selectRect.bottom;
+            var shouldShowBelow = spaceBelow >= listHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
             setListPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width,
+                top: shouldShowBelow
+                    ? selectRect.bottom
+                    : selectRect.top - listHeight - 5,
+                left: selectRect.left,
+                width: selectRect.width,
             });
         }
     };
     var toggleOpen = function () {
         if (!isOpen) {
-            updateListPosition();
+            setIsOpen(true);
+            requestAnimationFrame(function () {
+                updateListPosition();
+            });
+        }
+        else {
+            setIsOpen(false);
         }
-        setIsOpen(!isOpen);
     };
     var handleClickOutside = function (event) {
         if (selectRef.current &&
@@ -98,30 +111,44 @@ function Select(_a, ref) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "select-list ".concat(isOpen ? "visible" : ""), style: {
+    useEffect(function () {
+        if (isOpen) {
+            var handleScroll_1 = function () {
+                updateListPosition();
+            };
+            window.addEventListener("scroll", handleScroll_1, true);
+            return function () {
+                window.removeEventListener("scroll", handleScroll_1, true);
+            };
+        }
+        return function () { };
+    }, [isOpen]);
+    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "".concat(styles.selectList, " ").concat(isOpen ? styles.visible : "", " ").concat(placement), style: {
+            position: "fixed",
             top: "".concat(listPosition.top, "px"),
             left: "".concat(listPosition.left, "px"),
             width: "".concat(listPosition.width, "px"),
-        } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
-            ? "selected"
-            : "", " ").concat(!multiple && item.value === selectedItem ? "highlighted" : "", " ").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))); }))); };
+            margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
+        } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(Array.isArray(selected) && selected.includes(item.value)
+            ? styles.selected
+            : "", " ").concat(!multiple && item.value === selectedItem ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : ""), onClick: function () { return handleSelect(item); } },
+        multiple && React.createElement("span", { className: styles.selectItemIcon }),
+        React.createElement("span", { className: styles.selectItemText }, item.label))); }))); };
     useImperativeHandle(ref, function () { return ({
         validate: function () { return validateSelect(selected); },
     }); });
-    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : ""), style: { width: "".concat(width, "%") } },
-        React.createElement("button", { type: "button", className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen, style: { width: "100%" } },
-            React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
+    return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault), onClick: toggleOpen, style: { width: "100%" } },
+            React.createElement("span", { className: styles.selectText }, 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") })),
+            React.createElement("span", { className: "".concat(styles.selectIcon, " ").concat(isOpen ? styles.allawIconChevronUp : styles.allawIconChevronDown) })),
         isOpen && ReactDOM.createPortal(renderList(), document.body),
-        isRequired && showError && error && (React.createElement("div", { className: "error-message" },
+        isRequired && showError && error && (React.createElement("div", { className: styles.errorMessage },
             React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
 }
 export default forwardRef(Select);

package/dist/components/atoms/selects/{Select.css → Select.module.css}

@@ -1,4 +1,4 @@
-.select-container {
+.selectContainer {
   position: relative;
 }
 
@@ -21,7 +21,7 @@
   background: var(--grey-venom, #e6edf5);
 }
 
-.select-text {
+.selectText {
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   font-family: "Open Sans";
   font-size: 14px;
@@ -33,7 +33,7 @@
   text-overflow: ellipsis;
 }
 
-.select-icon {
+.selectIcon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
@@ -43,14 +43,13 @@
   padding-top: 4px;
 }
 
-.select-list {
+.selectList {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
-  /* background: var(--secondary-light-grey, #f4f7fb); */
   background: #fff;
   border-radius: 8px;
   padding: 8px 0;
@@ -69,7 +68,7 @@
   margin-top: 4px;
 }
 
-.select-item {
+.selectItem {
   display: flex;
   align-items: center;
   padding: 8px 16px;
@@ -77,36 +76,36 @@
   width: 100%;
 }
 
-.select-item:hover {
+.selectItem:hover {
   background: var(--grey-venom, #e6edf5);
 }
 
-.select-item .select-item-icon {
+.selectItem .selectItemIcon {
   margin-right: 11px;
   visibility: hidden;
   color: var(--bleu-allaw, #0070f3);
 }
 
-.select-item.selected .select-item-icon {
+.selectItem.selected .selectItemIcon {
   visibility: visible;
 }
 
-.select-item.single-select .select-item-icon {
+.selectItem.singleSelect .selectItemIcon {
   display: none;
 }
 
-.select-item-text {
+.selectItemText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
 }
 
-.error-message {
+.errorMessage {
   padding-top: 4px;
   padding-left: 14px;
 }
 
-.select-item.highlighted {
+.selectItem.highlighted {
   background-color: var(--venom-grey-dark, #d1dce8);
 }

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

@@ -0,0 +1,86 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { Select as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export let args: {};
+    export namespace argTypes {
+        namespace items {
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace placeholder {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace multiple {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace isRequired {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace selectedItem {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace onChange {
+            namespace table {
+                let disable: boolean;
+            }
+        }
+        namespace width {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                export let min: number;
+                export let max: number;
+            }
+            export { control_5 as control };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+        namespace viewport {
+            namespace viewports {
+                namespace responsive {
+                    let name: string;
+                    namespace styles {
+                        let height: string;
+                    }
+                }
+            }
+            let defaultViewport: string;
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Pressed: any;
+export const Multiple: any;
+export const Required: any;
+export const CustomWidth: any;
+import Select from "./Select";