kelt-ui-kit-react 1.3.1 → 1.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/form/Form.tsx

@@ -163,7 +163,9 @@ export const DynamicForm = forwardRef(
           return (
             <div
               key={key}
-              className={`d-flex flex-column ${v.className} form-group-${v.type}`}
+              className={`d-flex flex-column ${
+                v.className ?? ""
+              } form-group form-group-${v.type}`}
             >
               {v.label && <label>{v.label}</label>}
               {v.icon && <Icon classIcon={v.icon} />}

package/src/form/Form.view.tsx

@@ -16,7 +16,7 @@ export const FormView = (): JSX.Element => {
       label: "Nom",
       focus: true,
       name: "nom",
-      type: TypeInputEnum.TEXT,
+      type: TypeInputEnum.PASSWORD,
       required: true,
     },
     {

package/src/form/form.css

@@ -9,6 +9,23 @@ input {
   }
 }
 form {
+  &.form-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    .form-group {
+      margin-right: 1rem;
+      flex: 1;
+      padding: 0;
+      .input-container {
+        min-width: auto;
+        input {
+          min-width: auto;
+        }
+      }
+    }
+  }
   label {
     font-weight: 600;
     font-size: 0.85rem;

package/src/form/input/Input.tsx

@@ -1,9 +1,12 @@
+import { useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { TypeInputEnum } from "../form.enum";
 import "./input.css";
 
 export interface InputProps {
   id: string; // obligatoire pour le label for
   name: string;
-  type?: string;
+  type?: TypeInputEnum;
   onInvalid?: (e: React.FocusEvent<HTMLInputElement>) => void;
   value?: string | number;
   placeholder?: string;
@@ -26,7 +29,7 @@ export interface InputProps {
 export const Input = ({
   id,
   name,
-  type = "text",
+  type = TypeInputEnum.TEXT,
   value,
   onInvalid,
   placeholder,
@@ -45,15 +48,18 @@ export const Input = ({
   onChange,
   onBlur,
 }: InputProps) => {
+  // Si le type est password, on utilise l'input de type password
+  const [showPassword, setShowPassword] = useState(false);
   return (
-    <>
+    <div className="input-container">
       <input type="text" style={{ display: "none" }} />
+
       <input
         ref={ref}
         id={id}
         name={name}
         inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
-        type={type}
+        type={showPassword ? TypeInputEnum.TEXT : type}
         spellCheck="false"
         value={value}
         placeholder={placeholder}
@@ -71,6 +77,16 @@ export const Input = ({
         className={`input-field ${className ?? ""}`}
         onInvalid={onInvalid}
       />
-    </>
+      <>
+        {type === TypeInputEnum.PASSWORD && (
+          <div
+            onClick={() => setShowPassword(!showPassword)}
+            className="input-password-icon"
+          >
+            <Icon classIcon={showPassword ? "bi-eye-slash" : "bi-eye"} />
+          </div>
+        )}
+      </>
+    </div>
   );
 };

package/src/form/input/input.css

@@ -0,0 +1,16 @@
+.input-container {
+  position: relative;
+  min-width: 250px;
+  width: 100%;
+  .input-password-icon {
+    position: absolute;
+    right: 10px;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+  }
+  input {
+    width: 100%;
+  }
+}