53 lines
1.4 KiB
React
53 lines
1.4 KiB
React
import { useState } from "react";
|
|
import TextInput from "../components/ui/input/input.tsx";
|
|
|
|
|
|
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",
|
|
}; |