Skip to content

Commit

Permalink
Feat/form update0.13.x (#22)
Browse files Browse the repository at this point in the history 
* feat/add FetchAutoCompleteFiled

* feat/add FetchAutoCompleteFiled

* feat/add FetchAutoCompleteFiled

* feat/add AddressGouvAutocompleteField
  • Loading branch information
vapersmile authored Apr 29, 2024
1 parent 82ae83c commit b80a85e
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 1 deletion.
51 changes: 51 additions & 0 deletions docs/react-front-kit/form/AddressGouvAutocompleteField.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Address gouv autocomplete field

<Description
extendsInfo={[
{
label: 'FetchAutocompleteField',
link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Form/FetchAutocompleteField/FetchAutocompleteField.tsx',
},
]}
importExample="import { AddressGouvField } from '@smile/react-front-kit';"
packageInfo={{
label: '@smile/react-front-kit',
link: 'https://www.npmjs.com/package/@smile/react-front-kit',
}}
sourceInfo={{
link: 'https://github.com/Smile-SA/react-front-kit/tree/main/packages/react-front-kit/src/Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField.tsx',
}}
>
An autocomplete field which is a [`FetchAutocompleteField
Props`](./FetchAutocompleteField) component configured for the
[`api-Adresse.data.gouv`](https://adresse.data.gouv.fr/).
</Description>

## Storybook Docs

<StorybookEmbed
storyId="3-custom-form-addressgouvautocompletefield--docs"
height="900"
/>

## Props

| Name | Type | Default | Description |
| ----------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| lat | `string` | `''` | To be filled in to prioritize these latitude coordinates in the search results. |
| lon | `string` | `''` | To be filled in to prioritize these longitude coordinates in the search results. |
| type | `string` | `''` | To be filled in to reduce to specific type of results of the search. |
| onFetchData | `(value: string) => Promise<IValue<IAddressGouvData>[]>` | `A default function getDataAddressGouv that makes a call to the api-adresse.gouv.fr API.` | This callback function return field value to the parameters and to be return `Promise<IValue<IAddressGouvData>[]>` value. By default this props is defined. |
| ... | - | - | extends [`FetchAutocompleteField Props`](./FetchAutocompleteField/#props) |

## IAddressGouvData

IAddressGouvData contain `properties` object with thats types:

| name | type | Description |
| ----------- | -------- | ---------------------- |
| city | `string` | Name of the city |
| housenumber | `string` | Number of the house |
| label | `string` | Resume label |
| postcode | `string` | Number of the postcode |
| street | `string` | Name of the street |
55 changes: 55 additions & 0 deletions docs/react-front-kit/form/FetchAutocompleteField.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Fetch Autocomplete Field

<Description
extendsInfo={[
{
label: 'Autocomplete',
link: 'https://mantine.dev/core/autocomplete/',
},
]}
importExample="import { FetchAutocompleteField } from '@smile/react-front-kit';"
packageInfo={{
label: '@smile/react-front-kit',
link: 'https://www.npmjs.com/package/@smile/react-front-kit',
}}
sourceInfo={{
link: 'https://github.com/Smile-SA/react-front-kit/tree/main/packages/react-front-kit/src/Form/FetchAutocompleteField/FetchAutocompleteField.tsx',
}}
>
Displaying an autocomplete field with an the request handling pre-making. The
field can returns data with `onFetchData` callback function and can also
returns option selected with this associated the data on click of the option
displayed by the filed with the `onOptionSubmit` callback function.
</Description>

## Storybook Docs

<StorybookEmbed
storyId="3-custom-form-fetchautocompletefield--docs"
height="620"
/>

## Props

| Name | Type | Default | Description |
| -------------- | ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| deDebounce | `number` | `1000` | Time before the string written in the field is taken into account. If the user modifies the field value before the end of the delay, the delay starts again from the beginning |
| minValueLength | `number` | `5` | Minimum length of the field value for started the request |
| placeholder | `string` | `"89 Pall Mall, St. James's, London SW1Y 5HS, United Kingdom"` | Value of the placeholder field |
| onOptionSubmit | `(value: IValue<T>) => void` | - | Callback function called when an option of the field is selected. The function returns [`IValue<T>`](#IValue<T>) |
| onFetchData | `(value: string) => Promise<IValue<T>[]>` | - | Callback function called when the request returns data |
| ... | - | - | extends [`autocomplete Props`](https://mantine.dev/core/autocomplete/?t=props) |

## IFetchOption

| Name | Type | Default | Description |
| ---------------- | -------- | ------- | --------------- |
| Key<Required/> | `string` | - | Key of option |
| Value<Required/> | `string` | - | Value of option |

## IValue`<T>`

| Name | Type | Default | Description |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------ |
| label<Required/> | `string` | - | Label displayed on options list and returned by the onFetchData function |
| Value<Required/> | `T` | - | The request data part corresponding to the selected option associated with the label |
2 changes: 1 addition & 1 deletion docs/react-front-kit/form/full-name-fields.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

## Storybook Docs

<StorybookEmbed storyId="3-custom-form-fullnamefields--docs" height="820" />
<StorybookEmbed storyId="3-custom-form-fullnamefields--docs" height="1120" />

## Props

Expand Down

0 comments on commit b80a85e

Please sign in to comment.