Creation doc du composant input
This commit is contained in:
@@ -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