import { Meta, Canvas, Source } from '@storybook/blocks';
import * as IsNotBeforeTodayStories from './IsNotBeforeToday.stories';

<Meta of={IsNotBeforeTodayStories} />
<style>
{
`
      .header {
      padding: 2rem;
      margin-bottom: 2rem;
    }
    
    .header h1 {
      margin-top: 0;
      color:  #0c419a;;
      font-size: 2.5rem;
      font-weight: 700;
    }
    
    .header p {
      font-size: 1.1rem;
      margin-bottom: 0;
    }
    `
}
</style>

<div className="header">
  <h1>Règle de validation `isNotBeforeToday`</h1>
      <p>La règle de validation `isNotBeforeToday` permet de vérifier qu'une date n'est pas antérieur à la date du jour. </p>
</div>


## Usage

Pour utiliser cette règle de validation, vous devez importer la règle depuis le package `@cnamts/synapse`.

<Source dark code={`
import { isNotBeforeToday } from '@cnamts/synapse';
`} />


Vous pouvez ensuite utiliser la fonction comme règle d'un champs de formulaire.

<Source dark code={`
<script setup lang="ts">
import { isNotBeforeToday } from '@cnamts/synapse';
import { VTextField } from 'vuetify/components';

</script>

<template>
	<VTextField
		:rules="[isNotBeforeToday]"
		label="Date"
	/>
</template>
`} />

## Customisation des messages d'erreur

Vous pouvez personnaliser les messages d'erreur en passant un objet `errorMessages` en paramètre de la fonction `isNotBeforeTodayFn`.
Puis en utilisant la fonction retournée comme règle d'un champs de formulaire.

<Source dark code={`
<script setup lang="ts">
import { isNotBeforeTodayFn } from '@cnamts/synapse';
import { VTextField } from 'vuetify/components';

const notBeforeToday = isNotBeforeTodayFn({
	default: \`The date must not be Before today\`,
});

</script>

<template>
	<VTextField
		:rules="[notBeforeToday]"
		label="Date"
	/>
</template>
`} />

## API

<Source dark code={`

isNotBeforeTodayFn(
	errorMessages?: {
		default: string;
	}
): (value: string | Date) => true | string;

`} />

### Arguments

- `errorMessages` : objet optionnel permettant de personnaliser les messages d'erreur. Les clés disponibles sont :
	- `default` : message d'erreur par défaut.

### Valeurs de retour

Retourne une fonction qui prend en paramètre une chaîne de caractères ou un objet `Date` représentant une date et retourne `true` si la date n'est pas antérieure à la date du jour, sinon retourne un message d'erreur.

## Exemples

<Canvas of={IsNotBeforeTodayStories.Default} />