kelt-ui-kit-react 1.3.0 → 1.3.2

package/package.json

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

package/src/form/Form.tsx

@@ -10,6 +10,7 @@ import { Icon } from "../icon/Icon";
 import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
 import { FormInterface, FormValuesInterface } from "./form.interface";
+import { Input } from "./input/Input";
 
 export type FormProps<
   T extends { [key: string]: string | number | boolean | Date | string[] }
@@ -185,12 +186,13 @@ export const DynamicForm = forwardRef(
                   }
                 />
               ) : (
-                <input
+                <Input
+                  id={v.name}
                   ref={(el) => (inputRefs.current[v.name] = el)}
                   name={v.name}
                   type={v.type}
                   placeholder={v.placeholder ?? ""}
-                  autoComplete={v.autoComplete ?? "on"}
+                  autoComplete={v.autoComplete ?? "off"}
                   tabIndex={0}
                   disabled={disabled}
                   autoFocus={v.focus ?? false}

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/input/Input.tsx

@@ -0,0 +1,92 @@
+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?: TypeInputEnum;
+  onInvalid?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  value?: string | number;
+  placeholder?: string;
+  className?: string;
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "search";
+  disabled?: boolean;
+  autoFocus?: boolean;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  autoComplete?: "on" | "off";
+  ref?: React.Ref<HTMLInputElement>;
+  step?: string;
+  tabIndex?: number;
+  checked?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+export const Input = ({
+  id,
+  name,
+  type = TypeInputEnum.TEXT,
+  value,
+  onInvalid,
+  placeholder,
+  className,
+  inputMode,
+  minLength,
+  maxLength,
+  autoFocus = false,
+  disabled = false,
+  required = false,
+  autoComplete = "off",
+  ref,
+  tabIndex = 0,
+  step,
+  checked,
+  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={showPassword ? TypeInputEnum.TEXT : type}
+        spellCheck="false"
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        autoComplete={autoComplete === "off" ? "fake" : autoComplete}
+        step={step}
+        tabIndex={tabIndex}
+        autoFocus={autoFocus}
+        minLength={minLength}
+        maxLength={maxLength}
+        onChange={onChange}
+        checked={checked}
+        onBlur={onBlur}
+        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%;
+  }
+}

package/src/index.ts

@@ -14,6 +14,7 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
+export { Input } from "./form/input/Input";
 export { TextArea } from "./form/textArea/TextArea";
 export { Grid } from "./grid/Grid";
 export { Header } from "./header/Header";