Merge branch 'features/input' into 'dev'

Features/input

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!12

src/components/ui/input/input.jsx

@@ -0,0 +1,13 @@
+import styles from "./input.module.css";
+
+const TextInput = ({ placeholder, onChange, value, borderStyle, ...props }) => {
+
+
+    let inputBorderStyle = styles.square;
+    if (borderStyle === "square") inputBorderStyle = styles.square;
+    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
+
+    return <input className={`${styles.input} ${inputBorderStyle}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
+};
+
+export default TextInput;

src/components/ui/input/input.module.css

@@ -0,0 +1,32 @@
+.input {
+    border: 1px solid rgba(200, 200, 200, 0.3);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #000;
+    font-size: 16px;
+    outline: none;
+    transition: all 0.3s ease;
+    width: fit-content;
+    padding: 8px 10px 8px 10px;
+    height: fit-content;
+}
+
+.input::placeholder {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.input:focus {
+    border-color: rgba(200, 200, 200, 0.6);
+    box-shadow: 0 4px 30px rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.38);
+}
+
+.rounded {
+    border-radius: 25px;
+}
+
+.square {
+    border-radius: 12px;
+}
+

src/stories/Input.stories.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import TextInput from "../components/ui/input/input.jsx";
+
+
+export default {
+    title: 'UI/Input',
+    component: TextInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: {
+        placeholder: "Placeholder",
+        borderStyle: "square",
+        value: "",
+        onChange: () => {}
+    },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Texte affiché quand le champ est vide.',
+        },
+        borderStyle: {
+            control: { type: 'select' },
+            options: ['square', 'rounded'],
+            description: 'Style de bordure du champ.',
+        },
+        value: {
+            control: 'text',
+            description: 'Valeur actuelle du champ de texte.',
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Fonction appelée à chaque changement de valeur.',
+        },
+    },
+};
+
+const InputRender = ({ placeholder, borderStyle }) => {
+    const [value, setValue] = useState("");
+
+    return <div>
+        <p>Value: {value}</p>
+        <TextInput placeholder={placeholder} borderStyle={borderStyle} value={value} onChange={e => setValue(e.target.value)} />
+    </div>
+};
+
+export const Default = (args) => <InputRender {...args} />;
+export const Rounded = (args) => <InputRender {...args} />;
+Rounded.args = {
+    placeholder: "Rounded",
+    borderStyle: "rounded",
+};