Creation doc du composant input
This commit is contained in:
1 parent
ed6ef51d4c
commit
2f5e7c29ac
1 file changed
+53
@@ -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",
|
||||||
|
};
|
||||||
Reference in new issue
Block a user