feat: key value component

[tonai]

PR pour l'issue #643

Utilisation:

import KeyValueList, { getKeyValueSchema } from "@/components/Input/KeyValueList";

const schema = yup.object({
  // use the getKeyValueSchema function to get the yup schema for the KeyValueList component 
  keyValue: getKeyValueSchema([
    { name: "isInteger", message: "value is not an integer", test: isInteger }, // you can add validators for the value field
  ]),
});

function Form() {
    const [data, setData] = useData(); // Get data from API (this is just for example, you probable want to use useQuery)
    const { keyValue, transformKeyValue } = useKeyValue(data); // Transform data from API to match keyValue schema
    const methods = useForm({
        mode: "onSubmit",
        resolver: yupResolver(schema),
        values: { keyValue },
    }); // Init form
    const { handleSubmit } = methods;
    const onSubmit = handleSubmit((values) => {
        console.log("onSubmit", values);
        // use the transformKeyValue function to transform from the keyValue schema back to array or object initial form
        setData(transformKeyValue(values.keyValue));
    });

    // You need to set up the FormProvider for the KeyValueList to access the form context
    return (
        <FormProvider {...methods}>
            <form onSubmit={onSubmit}>
                <h2>Form</h2>
                <KeyValueList label="Valeurs de la BDD"  name="keyValue"/>
                <Button type="submit">Enregistrer</Button>
                <pre>{JSON.stringify(data, null, 2)}</pre>
            </form>
        </FormProvider>
    );
}

Features:

• permet de gérer des listes de valeurs (array)
• permet de gérer des listes de clé/valeurs (object)
• bouton switch pour passer du mode array au mode object
• ajout/suppression de lignes
• drag and drop pour réordonner la liste
• fournit un schema yup prêt à l'emploi
• le schéma yup intègre un validateur pour éviter les doublons (pour les valeurs si array ou pour les clés si object)
• possible de passer des props au composant input pour les valeurs (par exemple { type: "date" })
• possible d'utiliser un select pour les valeurs et de fournir les options