Creation doc du composant input

This commit is contained in:
T'JAMPENS QUENTIN p2406187
2025-11-08 18:47:59 +01:00
parent ed6ef51d4c
commit 2f5e7c29ac
+53
View File
@@ -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",
};