chore(release): 1.1.0 (#6)

- Set Monserrat as a font globally
- harmonize button style and comportement
- update snackbar variant
- fix checkboxes and label alignment
- add customizable labels to Header and UserMenu components
- fix responsive logo shadows bug

Author: DidierViret

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@orif-informatique/react-components-library",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -18,7 +18,8 @@
   "files": [
     "dist",
     "package.json",
-    "README.md"
+    "README.md",
+    "assets"
   ],
   "scripts": {
     "clean": "rimraf dist src/styles/dist || true",
@@ -50,6 +51,7 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10",
+    "cssnano": "^7.1.2",
     "esbuild": "^0.25.9",
     "postcss": "^8.5.6",
     "postcss-url": "^10",

package.json

@@ -5,6 +5,7 @@ import esbuild from 'rollup-plugin-esbuild';
 import postcss from 'rollup-plugin-postcss';
 import tailwind from '@tailwindcss/postcss';
 import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
 import del from 'rollup-plugin-delete';
 import { promises as fs } from 'node:fs';
 import { join } from 'node:path';
@@ -82,9 +83,17 @@ export default {
 
     // CSS Tailwind v4
     postcss({
-      plugins: [tailwind(), autoprefixer()],
+      plugins: [
+        tailwind(),
+        autoprefixer(),
+        cssnano({
+          preset: ['default', {
+            mergeRules: false, //merge disabled to avoid bug with Tailwind CSS when using responsive property
+          }],
+        }),
+      ],
       extract: 'styles.css',
-      minimize: true,
+      minimize: false,
     }),
 
     // Inliner post-build des icônes référencées par le CSS

rollup.config.js

@@ -1,13 +1,48 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/forms";
 
+/* Import police Montserrat*/
+@font-face {
+  font-family: "Montserrat";
+  src: url("../assets/fonts/montserrat.ttf") format("truetype");
+  font-weight: 100 900;
+}
+
 /* Thème du projet (noms strictement identiques) */
 @theme {
-  --color-primary:    #005ba9;
+  --color-primary: #005ba9;
   --color-background: #f4f7fd;
-  --color-disabled:   #e7e7e7;
-  --color-danger:     #b91c1c;
+  --color-disabled: #e7e7e7;
+  --color-danger: #b91c1c;
 
   --font-display: "Montserrat", sans-serif;
+
+  --animate-fade-in: fade-in 0.3s ease-out;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  --animate-fade-out: fade-out 0.3s ease-in forwards;
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
 }
 
+/* Applique la police Montserrat globalement */
+@layer base {
+  * {
+    font-family: "Montserrat", sans-serif;
+  }
+}

src/index.css

@@ -16,15 +16,15 @@ const Button = ({
   const buttonMode = (variant) => {
     switch (variant) {
       case "primary":
-        return "bg-primary text-white active:bg-opacity-80";
+        return "bg-primary text-white before:border-transparent";
       case "secondary":
-        return "border border-primary text-primary hover:bg-primary hover:text-white active:bg-opacity-80 active:border-opacity-0";
+        return "bg-white text-primary";
       case "tertiary":
-        return "border border-black border-opacity-60 hover:bg-gray-800 hover:text-white active:bg-gray-600 active:border-opacity-0";
+        return "bg-white text-black";
       case "link":
         return "text-primary font-light hover:underline focus:underline";
       case "danger":
-        return "border border-danger text-danger hover:bg-danger hover:text-white active:bg-opacity-80 active:border-opacity-0";
+        return "bg-white text-danger before:border-danger";
       default:
         return "border border-black border-opacity-60 active:text-gray-700";
     }
@@ -35,11 +35,11 @@ const Button = ({
       case "small":
         return "text-sm";
       case "medium":
-        return "text-md";
+        return "text-base";
       case "large":
         return "text-lg";
       default:
-        return "text-md";
+        return "text-base";
     }
   };
 
@@ -74,9 +74,27 @@ const Button = ({
   return (
     <button
       className={[
-        "group flex justify-center items-center font-semibold",
+        "group flex justify-center items-center font-medium",
         variant !== "link"
-          ? "rounded-sm transition transform duration-300 px-4 py-2 gap-2 hover:scale-105"
+          ? `rounded-sm transition transform duration-300 px-4 py-2 gap-2  
+          relative isolate
+          before:content-[''] 
+          before:absolute 
+          before:inset-0 
+          before:-z-10
+          before:border 
+          before:rounded
+          before:bg-inherit
+          before:transition-all before:duration-300
+          hover:before:scale-105
+          active:before:scale-[1.01]
+          hover:shadow-lg/22
+          active:shadow-lg/14
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          disabled:hover:before:scale-100
+          disabled:hover:shadow-none
+          focus:outline-offset-2`
           : "",
         className,
         buttonMode(variant),
@@ -86,7 +104,7 @@ const Button = ({
       {...props}
     >
       {icon && (
-        <Icon name={icon} color={iconColor(variant)} size={iconSize(size)} />
+        <Icon name={icon} color={iconColor(variant)} size={iconSize(size)} disableAnimation={true} />
       )}
       {label && (
         <span className={hideTextOnMobile && icon ? "hidden sm:inline" : ""}>

src/ui/buttons/default/Button.jsx

@@ -37,7 +37,8 @@ export const Tertiary = {
 export const Danger = {
     args: {
         variant: "danger",
-        icon: "cross"
+        icon: "cross",
+        size: "medium"
     }
 }
 

src/ui/buttons/default/Button.stories.jsx

@@ -2,19 +2,25 @@ import { useState, useEffect } from "react";
 
 const ScrollToTopButton = () => {
     const [isVisible, setVisible] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
 
     useEffect(() => {
         const toggleVisibility = () => {
             if (window.scrollY > 200) {
                 setVisible(true);
-            } else {
-                setVisible(false);
+                setIsClosing(false);
+            } else if (isVisible) {
+                setIsClosing(true);
+                setTimeout(() => {
+                    setVisible(false);
+                    setIsClosing(false);
+                }, 300);
             }
         }
 
         window.addEventListener("scroll", toggleVisibility);
         return () => window.removeEventListener("scroll", toggleVisibility);
-    }, []);
+    }, [isVisible]);
 
     const scrollToTop = () => {
         window.scrollTo({
@@ -28,7 +34,7 @@ const ScrollToTopButton = () => {
     return (
         <button
             onClick={scrollToTop}
-            className="fixed bottom-16 right-8 p-3 bg-primary bg-opacity-80 rounded-full transition duration-300 hover:bg-opacity-100 hover:scale-105"
+            className={`fixed bottom-16 right-8 p-3 bg-primary bg-opacity-80 rounded-full transition duration-300 hover:bg-opacity-100 hover:scale-105 ${isClosing ? 'animate-fade-out' : 'animate-fade-in'}`}
         >
             <svg className="size-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />

src/ui/buttons/scroll-to-top/ScrollToTopButton.jsx

@@ -9,6 +9,9 @@ import UserMenu from "../user-menu/UserMenu";
 const Header = ({
   user = null,
   title = null,
+  greetingLabel = "Hello",
+  passwordChangeLabel = "Update Password",
+  administrationLabel = "Administration",
   logoPath,
   onLogin = () => {},
   onLogout = () => {},
@@ -35,7 +38,7 @@ const Header = ({
                     </a>
                 </div>
                 {isOpen && (
-                    <UserMenu user={user} setIsOpen={setIsOpen} onLogin={onLogin} onLogout={onLogout}/>
+                    <UserMenu user={user} setIsOpen={setIsOpen} onLogin={onLogin} onLogout={onLogout} greetingLabel={greetingLabel} passwordChangeLabel={passwordChangeLabel} administrationLabel={administrationLabel} />
                 )}
             </div>
         </header>

src/ui/header/Header.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Icon = ({ name = "home", size = 12, color = "black" }) => {
+const Icon = ({ name = "home", size = 12, color = "black", disableAnimation = false }) => {
     const sizeClasses = {
         4: "size-4",
         6: "size-6",
@@ -15,14 +15,15 @@ const Icon = ({ name = "home", size = 12, color = "black" }) => {
 
     const colorClasses = {
         "white": "text-white",
-        "black": "text-black group-hover:text-white",
-        "primary": "text-primary group-hover:text-white",
-        "danger": "text-danger group-hover:text-white"
+        "black": "text-black group-hover:text-black",
+        "primary": "text-primary group-hover:text-primary",
+        "danger": "text-danger group-hover:text-danger"
     }
 
     const sizeClass = sizeClasses[size] || sizeClasses[12];
     const colorClass = colorClasses[color] || sizeClasses["black"];
-    const className = ["transition transform duration-300 stroke-1 hover:scale-105",
+    const animationClass = disableAnimation ? "" : "hover:scale-105";
+    const className = ["transition transform duration-300 stroke-[1.3]", animationClass,
         colorClass, sizeClass].join(" ");
 
     const icons = {
@@ -198,13 +199,22 @@ const Icon = ({ name = "home", size = 12, color = "black" }) => {
             <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
             </svg>
+        ),
+        "exclamation-triangle": (
+            <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+            </svg>),
+        "exclamation-circle": (<svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+        </svg>
         )
     }
 
     Icon.propTypes = {
         name: PropTypes.oneOf(Object.keys(icons)),
         size: PropTypes.oneOf(Object.keys(sizeClasses)),
-        color: PropTypes.oneOf(Object.keys(colorClasses))
+        color: PropTypes.oneOf(Object.keys(colorClasses)),
+        disableAnimation: PropTypes.bool
     }
 
     const iconSvg = icons[name] || icons["home"];

src/ui/icon/Icon.jsx

@@ -6,7 +6,7 @@ export default {
   tags: ["autodocs"],
   layout: "fullscreen",
   args: {
-    label: "Date :"
+    label: "Date"
   }
 };