allaw-ui 2.7.8 → 2.7.9

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

@@ -0,0 +1,20 @@
+import React from "react";
+import "../../../styles/icons.css";
+export type ResponsiveConfig = {
+    label?: string;
+    height?: number;
+    width?: number;
+};
+export type ResponsiveBreakpoints = Record<number, ResponsiveConfig>;
+export interface SelectCardProps {
+    iconName?: string;
+    iconUrl?: string;
+    label: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    size?: "small" | "medium" | "large";
+    onClick: () => void;
+    responsiveConfig?: ResponsiveBreakpoints;
+}
+declare const SelectCard: React.FC<SelectCardProps>;
+export default SelectCard;

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

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import styles from "./SelectCard.module.css";
+import "../../../styles/icons.css";
+var SelectCard = function (_a) {
+    var iconName = _a.iconName, iconUrl = _a.iconUrl, label = _a.label, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, onClick = _a.onClick, responsiveConfig = _a.responsiveConfig;
+    var _e = useState(label), currentLabel = _e[0], setCurrentLabel = _e[1];
+    var _f = useState({}), currentStyle = _f[0], setCurrentStyle = _f[1];
+    useEffect(function () {
+        if (!responsiveConfig)
+            return;
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var breakpoints = Object.keys(responsiveConfig)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            // Réinitialiser aux valeurs par défaut
+            var selectedLabel = label;
+            var selectedWidth = undefined;
+            var selectedHeight = undefined;
+            // Trouver la configuration appropriée pour la largeur actuelle
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    var config = responsiveConfig[breakpoint];
+                    if (config.label)
+                        selectedLabel = config.label;
+                    if (config.width)
+                        selectedWidth = config.width;
+                    if (config.height)
+                        selectedHeight = config.height;
+                }
+                else {
+                    break;
+                }
+            }
+            setCurrentLabel(selectedLabel);
+            setCurrentStyle({
+                width: selectedWidth ? "".concat(selectedWidth, "px") : undefined,
+                height: selectedHeight ? "".concat(selectedHeight, "px") : undefined,
+            });
+        };
+        // Vérification initiale
+        handleResize();
+        // Ajouter un écouteur d'événement
+        window.addEventListener("resize", handleResize);
+        // Nettoyage
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [responsiveConfig, label]);
+    var handleClick = function () {
+        if (!isDisabled) {
+            onClick();
+        }
+    };
+    var renderIcon = function () {
+        if (iconUrl) {
+            return (React.createElement("img", { src: iconUrl, alt: currentLabel, className: styles.iconImage }));
+        }
+        else if (iconName) {
+            return React.createElement("i", { className: "".concat(iconName, " ").concat(styles.iconFont) });
+        }
+        return null;
+    };
+    return (React.createElement("button", { className: "".concat(styles.selectCard, " \n                ").concat(isActive ? styles.active : "", " \n                ").concat(isDisabled ? styles.disabled : "", " \n                ").concat(styles[size]), onClick: handleClick, disabled: isDisabled, type: "button", style: currentStyle, title: currentLabel },
+        React.createElement("div", { className: styles.contentWrapper },
+            (iconName || iconUrl) && (React.createElement("div", { className: styles.iconWrapper }, renderIcon())),
+            React.createElement("span", { className: styles.label }, currentLabel))));
+};
+export default SelectCard;

package/dist/components/atoms/radios/SelectCard.module.css

@@ -0,0 +1,174 @@
+.selectCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #e6edf5;
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 0;
+  transition: all 0.2s ease;
+  outline: none;
+  width: fit-content;
+  box-sizing: border-box;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px; /* Hauteur fixe pour l'icône */
+  margin-bottom: 4px; /* Espace supplémentaire en bas de l'icône */
+}
+
+/* Taille d'icône par défaut */
+.iconFont {
+  color: #456073;
+}
+
+.iconImage {
+  object-fit: contain;
+}
+
+.label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #456073;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* Limite à 2 lignes */
+  -webkit-box-orient: vertical;
+  height: 2.4em; /* Hauteur fixe pour 2 lignes */
+}
+
+/* Tailles */
+.small {
+  min-width: 80px;
+  min-height: 80px;
+  max-width: 80px;
+}
+
+.small .iconFont {
+  font-size: 24px;
+}
+
+.small .iconImage {
+  width: 24px;
+  height: 24px;
+}
+
+.small .iconWrapper {
+  height: 32px;
+}
+
+.medium {
+  min-width: 120px;
+  min-height: 120px;
+  max-width: 120px;
+}
+
+.medium .iconFont {
+  font-size: 32px;
+}
+
+.medium .iconImage {
+  width: 32px;
+  height: 32px;
+}
+
+.medium .iconWrapper {
+  height: 48px;
+}
+
+.large {
+  min-width: 160px;
+  min-height: 160px;
+  max-width: 160px;
+}
+
+.large .iconFont {
+  font-size: 48px;
+}
+
+.large .iconImage {
+  width: 48px;
+  height: 48px;
+}
+
+.large .iconWrapper {
+  height: 64px;
+}
+
+/* États - Non sélectionné */
+.selectCard {
+  background-color: #fff;
+  border-color: #e6edf5;
+}
+
+.selectCard:hover {
+  border-color: #d1dce8;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.selectCard:active {
+  border-color: #d1dce7;
+  background-color: #f4f7fb;
+}
+
+/* États - Sélectionné */
+.active {
+  border-color: #25beeb;
+}
+
+.active .iconFont,
+.active .label {
+  color: #25beeb;
+}
+
+.active:hover {
+  border-color: #7dd5f2;
+}
+
+.active:active {
+  border-color: #1a9bc2;
+  background-color: #e6edf5;
+}
+
+/* États - Désactivé */
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: #d1dce7;
+  background-color: #f4f7fb;
+}
+
+.disabled:hover {
+  border-color: #d1dce7;
+  box-shadow: none;
+}
+
+.disabled .iconFont,
+.disabled .label {
+  color: #728ea7;
+}

package/dist/components/atoms/radios/SelectCard.stories.d.ts

@@ -0,0 +1,77 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SelectCard as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args { }
+    export namespace argTypes {
+        namespace iconName {
+            let control: string;
+            let description: string;
+        }
+        namespace iconUrl {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace label {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace isActive {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace isDisabled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace size {
+            export namespace control_5 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace responsiveConfig {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Active: any;
+export const Disabled: any;
+export const Small: any;
+export const Large: any;
+export const WithImageUrl: any;
+export const WithLongText: any;
+export const WithResponsiveConfig: any;
+import SelectCard from "./SelectCard";

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

@@ -0,0 +1,153 @@
+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 SelectCard from "./SelectCard";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/Radios/SelectCard",
+    component: SelectCard,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        iconName: {
+            control: "text",
+            description: "Nom de l'icône à afficher (utilise la font allaw-font)",
+        },
+        iconUrl: {
+            control: "text",
+            description: "URL de l'image à afficher (alternative à iconName)",
+        },
+        label: {
+            control: "text",
+            description: "Texte du bouton",
+        },
+        isActive: {
+            control: "boolean",
+            description: "État actif du bouton",
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "État désactivé du bouton",
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "medium", "large"],
+            },
+            description: "Taille du bouton",
+        },
+        responsiveConfig: {
+            control: "object",
+            description: "Configuration responsive du bouton",
+        },
+    },
+    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(args.isActive || false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        if (!args.isDisabled) {
+            setIsActive(!isActive);
+            args.onClick();
+        }
+    };
+    return React.createElement(SelectCard, __assign({}, args, { isActive: isActive, onClick: handleClick }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Utiliser la convention type d'allaw",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var Active = Template.bind({});
+Active.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: true,
+    isDisabled: false,
+    size: "medium",
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: true,
+    size: "medium",
+};
+export var Small = Template.bind({});
+Small.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "small",
+};
+export var Large = Template.bind({});
+Large.args = {
+    label: "Choix 1",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "large",
+};
+export var WithImageUrl = Template.bind({});
+WithImageUrl.args = {
+    label: "Choix 1",
+    iconUrl: "https://www.svgrepo.com/show/428478/file-choose.svg",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var WithLongText = Template.bind({});
+WithLongText.args = {
+    label: "Texte très long qui devrait être tronqué avec des points de suspension",
+    iconUrl: "https://www.svgrepo.com/show/428478/file-choose.svg",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+};
+export var WithResponsiveConfig = Template.bind({});
+WithResponsiveConfig.args = {
+    label: "Version Desktop",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    responsiveConfig: {
+        768: {
+            label: "Version Tablette",
+            width: 100,
+            height: 100,
+        },
+        480: {
+            label: "Mobile",
+            width: 80,
+            height: 80,
+        },
+    },
+};

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

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

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

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

package/dist/index.d.ts

@@ -21,6 +21,8 @@ export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
 export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
 export { default as RadioButton } from "./components/atoms/radios/RadioButton";
 export { default as SingleFilter } from "./components/atoms/filters/SingleFilter";
+export { default as SelectCard } from "./components/atoms/radios/SelectCard";
+export type { SelectCardProps } from "./components/atoms/radios/SelectCard";
 export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";

package/dist/index.js

@@ -25,6 +25,7 @@ export { default as ProgressBar } from "./components/atoms/progressBars/Progress
 // Radios
 export { default as RadioButton } from "./components/atoms/radios/RadioButton";
 export { default as SingleFilter } from "./components/atoms/filters/SingleFilter";
+export { default as SelectCard } from "./components/atoms/radios/SelectCard";
 // Selects
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";

package/package.json

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