allaw-ui 2.8.5 → 2.8.7

package/dist/components/molecules/checkboxForm/ColoredCheckbox.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../../../styles/global.css";
+export interface ColoredCheckboxProps {
+    id?: string;
+    label?: React.ReactNode;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    boxColor?: string;
+    markColor?: string;
+    textColor?: string;
+    size?: "default" | "small";
+    markType?: "cross" | "check";
+}
+declare const ColoredCheckbox: React.FC<ColoredCheckboxProps>;
+export default ColoredCheckbox;

package/dist/components/molecules/checkboxForm/ColoredCheckbox.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import styles from "./ColoredCheckbox.module.css";
+import "../../../styles/global.css"; // Pour importer les icônes allaw
+// Fonction pour formater l'email avec des ellipses intelligentes
+var formatEmail = function (email) {
+    if (!email || typeof email !== "string" || !email.includes("@")) {
+        return email;
+    }
+    // Diviser l'email en parties
+    var _a = email.split("@"), localPart = _a[0], domainFull = _a[1];
+    // Diviser la partie domaine
+    var lastDotIndex = domainFull.lastIndexOf(".");
+    var domainPart = lastDotIndex > 0 ? domainFull.substring(0, lastDotIndex) : domainFull;
+    var tld = lastDotIndex > 0 ? domainFull.substring(lastDotIndex) : "";
+    return (React.createElement("div", { className: styles.emailContainer },
+        React.createElement("span", { className: "".concat(styles.emailPart, " ").concat(styles.emailLocalPart) }, localPart),
+        React.createElement("span", null, "@"),
+        React.createElement("span", { className: "".concat(styles.emailPart, " ").concat(styles.emailDomainPart) }, domainPart),
+        React.createElement("span", { className: styles.emailTLD }, tld)));
+};
+var ColoredCheckbox = function (_a) {
+    var id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.boxColor, boxColor = _c === void 0 ? "#000000" : _c, _d = _a.markColor, markColor = _d === void 0 ? "#FFFFFF" : _d, _e = _a.textColor, textColor = _e === void 0 ? "#000000" : _e, _f = _a.size, size = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g;
+    var _h = useState(checked), isChecked = _h[0], setIsChecked = _h[1];
+    // Generate a random ID if none is provided
+    var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
+    var handleClick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var newChecked = !isChecked;
+        setIsChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+    };
+    // Update internal state when checked prop changes
+    React.useEffect(function () {
+        setIsChecked(checked);
+    }, [checked]);
+    // Create custom styles for the checkbox and mark
+    var checkboxStyle = {
+        backgroundColor: isChecked ? boxColor : "transparent",
+        borderColor: boxColor,
+    };
+    var markStyle = {
+        color: markColor,
+    };
+    var labelStyle = {
+        color: textColor,
+    };
+    // Formater le label s'il s'agit d'une chaîne de caractères qui ressemble à un email
+    var formattedLabel = typeof label === "string" && label.includes("@")
+        ? formatEmail(label)
+        : label;
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("button", { id: checkboxId, className: "".concat(styles.checkbox, " ").concat(isChecked ? styles.checked : "", " ").concat(size === "small" ? styles.small : ""), onClick: handleClick, style: checkboxStyle, "aria-checked": isChecked, role: "checkbox", "data-cy": "checkbox-".concat(checkboxId) }, isChecked && (React.createElement("span", { className: "".concat(styles.icon, " ").concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check"), style: markStyle }))),
+        label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, formattedLabel))));
+};
+export default ColoredCheckbox;

package/dist/components/molecules/checkboxForm/ColoredCheckbox.module.css

@@ -0,0 +1,83 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  width: 100%;
+}
+
+.checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.checkbox.small {
+  width: 20px;
+  height: 20px;
+}
+
+.checkbox.checked {
+  border: none;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  width: 100%;
+  height: 100%;
+}
+
+.small .icon {
+  font-size: 11px;
+}
+
+.label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.emailContainer {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emailPart {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.emailLocalPart {
+  flex-shrink: 1;
+  min-width: 40px;
+}
+
+.emailDomainPart {
+  flex-shrink: 2;
+}
+
+.emailTLD {
+  flex-shrink: 0;
+}

package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.d.ts

@@ -0,0 +1,84 @@
+declare namespace _default {
+    export let title: string;
+    export { ColoredCheckbox as component };
+    export let tags: string[];
+    export namespace args {
+        let label: string;
+    }
+    export namespace argTypes {
+        export namespace checked {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace onChange {
+            let action: string;
+        }
+        export namespace label_1 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { label_1 as label };
+        export namespace boxColor {
+            let control_2: string;
+            export { control_2 as control };
+            export let defaultValue: string;
+        }
+        export namespace markColor {
+            let control_3: string;
+            export { control_3 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        export namespace textColor {
+            let control_4: string;
+            export { control_4 as control };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
+        }
+        export namespace size {
+            export namespace control_5 {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+            export { control_5 as control };
+        }
+        export namespace markType {
+            export namespace control_6 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_6 as control };
+        }
+    }
+    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 Checked: any;
+export const CheckMark: any;
+export const CheckedCheckMark: any;
+export const Small: any;
+export const SmallChecked: any;
+export const CustomColors: any;
+export const NoLabel: any;
+export const DarkBackground: any;
+export const EmailLabel: any;
+export const EmailLabelSmallContainer: any;
+export const EmailLabelVerySmallContainer: any;
+export const LongEmailLabel: any;
+export const LongEmailLabelSmallContainer: any;
+export const LongEmailLabelVerySmallContainer: any;
+import ColoredCheckbox from "./ColoredCheckbox";

package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.js

@@ -0,0 +1,117 @@
+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 ColoredCheckbox from "./ColoredCheckbox";
+export default {
+    title: "Components/Molecules/ColoredCheckbox",
+    component: ColoredCheckbox,
+    tags: ["autodocs"],
+    args: {
+        label: "Sample label",
+    },
+    argTypes: {
+        checked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onChange: { action: "changed" },
+        label: {
+            control: "text",
+        },
+        boxColor: {
+            control: "color",
+            defaultValue: "#000000",
+        },
+        markColor: {
+            control: "color",
+            defaultValue: "#FFFFFF",
+        },
+        textColor: {
+            control: "color",
+            defaultValue: "#000000",
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["default", "small"],
+            },
+        },
+        markType: {
+            control: {
+                type: "select",
+                options: ["cross", "check"],
+            },
+        },
+    },
+    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.checked), checked = _a[0], setChecked = _a[1];
+    var handleChange = function (newChecked) {
+        setChecked(newChecked);
+    };
+    return (React.createElement("div", { style: { width: args.containerWidth || "100%" } },
+        React.createElement(ColoredCheckbox, __assign({}, args, { checked: checked, onChange: handleChange }))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    checked: false,
+    label: "Default Checkbox",
+    boxColor: "#000000",
+    markColor: "#FFFFFF",
+    textColor: "#000000",
+    size: "default",
+    markType: "cross",
+};
+export var Checked = Template.bind({});
+Checked.args = __assign(__assign({}, Default.args), { checked: true, label: "Checked Checkbox" });
+export var CheckMark = Template.bind({});
+CheckMark.args = __assign(__assign({}, Default.args), { label: "Checkbox with check mark", markType: "check" });
+export var CheckedCheckMark = Template.bind({});
+CheckedCheckMark.args = __assign(__assign({}, CheckMark.args), { checked: true, label: "Checked Checkbox with check mark" });
+export var Small = Template.bind({});
+Small.args = __assign(__assign({}, Default.args), { label: "Small Checkbox", size: "small" });
+export var SmallChecked = Template.bind({});
+SmallChecked.args = __assign(__assign({}, Small.args), { checked: true, label: "Small Checked Checkbox" });
+export var CustomColors = Template.bind({});
+CustomColors.args = __assign(__assign({}, Default.args), { checked: true, label: "Custom Colors Checkbox", boxColor: "#25beeb", markColor: "#FFFFFF", textColor: "#456073" });
+export var NoLabel = Template.bind({});
+NoLabel.args = __assign(__assign({}, Default.args), { label: undefined });
+export var DarkBackground = Template.bind({});
+DarkBackground.args = __assign(__assign({}, Default.args), { checked: true, boxColor: "#FFFFFF", markColor: "#000000", textColor: "#FFFFFF" });
+DarkBackground.parameters = {
+    backgrounds: { default: "dark" },
+};
+// Exemples avec des adresses email
+export var EmailLabel = Template.bind({});
+EmailLabel.args = __assign(__assign({}, Default.args), { checked: true, label: "vincent.desbrosses@hotmail.com", boxColor: "#25beeb" });
+export var EmailLabelSmallContainer = Template.bind({});
+EmailLabelSmallContainer.args = __assign(__assign({}, EmailLabel.args), { containerWidth: "300px" });
+export var EmailLabelVerySmallContainer = Template.bind({});
+EmailLabelVerySmallContainer.args = __assign(__assign({}, EmailLabel.args), { containerWidth: "200px" });
+export var LongEmailLabel = Template.bind({});
+LongEmailLabel.args = __assign(__assign({}, Default.args), { checked: true, label: "very.long.email.address.with.many.parts@some-company-with-long-domain-name.com", boxColor: "#25beeb" });
+export var LongEmailLabelSmallContainer = Template.bind({});
+LongEmailLabelSmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "300px" });
+export var LongEmailLabelVerySmallContainer = Template.bind({});
+LongEmailLabelVerySmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "200px" });

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

@@ -1,2 +1,4 @@
 export { default as CheckboxForm } from "./CheckboxForm";
 export type { CheckboxFormProps } from "./CheckboxForm";
+export { default as ColoredCheckbox } from "./ColoredCheckbox";
+export type { ColoredCheckboxProps } from "./ColoredCheckbox";

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

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

package/dist/index.d.ts

@@ -62,6 +62,9 @@ export { default as EmployeeCard } from "./components/molecules/employeeCard/Emp
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
+export type { CheckboxFormProps } from "./components/molecules/checkboxForm/CheckboxForm";
+export { default as ColoredCheckbox } from "./components/molecules/checkboxForm/ColoredCheckbox";
+export type { ColoredCheckboxProps } from "./components/molecules/checkboxForm/ColoredCheckbox";
 export { default as RadioForm } from "./components/molecules/radioForm/RadioForm";
 export { default as SelectForm } from "./components/molecules/selectForm/SelectForm";
 export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcrumb";

package/dist/index.js

@@ -72,6 +72,7 @@ export { default as EmployeeCard } from "./components/molecules/employeeCard/Emp
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 // CheckboxForm
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
+export { default as ColoredCheckbox } from "./components/molecules/checkboxForm/ColoredCheckbox";
 // RadioForm
 export { default as RadioForm } from "./components/molecules/radioForm/RadioForm";
 // SelectForm

package/package.json

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