the-site-components
==========

<!---
This file is generated by the-tmpl. Do not update manually.
--->

<!-- Badge Start -->
<a name="badges"></a>

[![Build Status][bd_travis_shield_url]][bd_travis_url]
[![npm Version][bd_npm_shield_url]][bd_npm_url]
[![JS Standard][bd_standard_shield_url]][bd_standard_url]

[bd_repo_url]: https://github.com/the-labo/the-site-components
[bd_travis_url]: http://travis-ci.org/the-labo/the-site-components
[bd_travis_shield_url]: http://img.shields.io/travis/the-labo/the-site-components.svg?style=flat
[bd_travis_com_url]: http://travis-ci.com/the-labo/the-site-components
[bd_travis_com_shield_url]: https://api.travis-ci.com/the-labo/the-site-components.svg?token=
[bd_license_url]: https://github.com/the-labo/the-site-components/blob/master/LICENSE
[bd_npm_url]: http://www.npmjs.org/package/the-site-components
[bd_npm_shield_url]: http://img.shields.io/npm/v/the-site-components.svg?style=flat
[bd_standard_url]: http://standardjs.com/
[bd_standard_shield_url]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg

<!-- Badge End -->


<!-- Description Start -->
<a name="description"></a>

Components for the-site

<!-- Description End -->


<!-- Overview Start -->
<a name="overview"></a>



<!-- Overview End -->


<!-- Sections Start -->
<a name="sections"></a>

<!-- Section from "doc/guides/01.Installation.md.hbs" Start -->

<a name="section-doc-guides-01-installation-md"></a>

Installation
-----

```bash
$ npm install the-site-components --save
```


<!-- Section from "doc/guides/01.Installation.md.hbs" End -->

<!-- Section from "doc/guides/02.Usage.md.hbs" Start -->

<a name="section-doc-guides-02-usage-md"></a>

Usage
---------

```javascript
'use strict'

import React from 'react'
import {
  TheSignInForm,
  TheSignUpForm,
  TheOperationList,
  TheCreateDialog,
} from 'the-site-components'
import { formed } from 'the-component-mixins'
import { TheThemeStyle, TheIcon } from 'the-components'

const SignInForm = formed(TheSignInForm)
const SignUpForm = formed(TheSignUpForm)

class ExampleComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      signInValues: {},
      signUpValues: {},
      signUpStep: 0
    }
  }

  render () {
    const l = (key) => ({})[key] || key.split(/\./g).pop()
    return (
      <div>
        <TheThemeStyle/>
        <TheIcon.CdnLink/>
        <h1>TheSignInForm</h1>
        <div>
          <SignInForm {...{l}}
                      values={this.state.signInValues}
                      onUpdate={(signInValues) => this.setState({signInValues: Object.assign(this.state.signInValues, signInValues)})}
          />
        </div>
        <h1>SignUpForm</h1>
        <div>
          <SignUpForm {...{l}}
                      values={this.state.signUpValues}
                      onUpdate={(signUpValues) => this.setState({signUpValues: Object.assign(this.state.signUpValues, signUpValues)})}
                      step={this.state.signUpStep}
                      onStep={(signUpStep) => this.setState({signUpStep})}
          />
        </div>
        <hr/>

        <h1>TheOperationList</h1>

        <div>

          <TheOperationList entities={[{id: 1, name: 'v1'}, {id: 2, name: 'v2'}]}
                            {...{l}}
                            fields={{
                              id: {
                                label: 'id',
                              },
                              name: {
                                label: 'name',
                              },

                            }}
          />

          <TheCreateDialog active={false}
                           {...{l}}
          />
        </div>
      </div>

    )
  }
}

export default ExampleComponent

```


<!-- Section from "doc/guides/02.Usage.md.hbs" End -->

<!-- Section from "doc/guides/03.Components.md.hbs" Start -->

<a name="section-doc-guides-03-components-md"></a>

Components
-----------

### TheConnectionRetryDialog

@lends TheConnectionRetryDialog

**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `reloadIcon` |   |  | `null` |
| `warningIcon` |   |  | `null` |

### TheCreateDialog



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `doneTitle` |   |  | `title` |

### TheDestroyDialog



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `renderItem` |   |  | `(entity) => entity.name` |

### TheFBLoginButton




### TheLocaleForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `icon` |   |  | `'fas fa-globe'` |
| `name` |   |  | `'locale'` |

### TheOperationDialog



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `renderItem` |   |  | `({ name }) => name` |

### TheOperationList




### TheOperationPager




### ThePasswordChangeForm




### TheProfileEditForm




### TheRecoverResetForm




### TheRecoverSendForm




### TheSearchForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `autoFocus` |   |  | `false` |
| `name` |   |  | `'q'` |

### TheSigninForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `nameParser` |   |  | `userNameParser` |

### TheSignUpForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `nameParser` |   |  | `userNameParser` |
| `required` |   |  | `['name', 'password', 'profile.email']` |
| `step` |   |  | `0` |

### TheSiteToasts




### TheUserCreateForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `roles` |   |  | `{}` |

### TheUserImage



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `scale` |   |  | `'fill'` |
| `size` |   |  | `48` |

### TheUsersRoleForm



**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `roles` |   |  | `{}` |
| `users` |   |  | `[]` |



<!-- Section from "doc/guides/03.Components.md.hbs" End -->


<!-- Sections Start -->


<!-- LICENSE Start -->
<a name="license"></a>

License
-------
This software is released under the [MIT License](https://github.com/the-labo/the-site-components/blob/master/LICENSE).

<!-- LICENSE End -->


<!-- Links Start -->
<a name="links"></a>

Links
------

+ [THE Labo][t_h_e_labo_url]

[t_h_e_labo_url]: https://github.com/the-labo

<!-- Links End -->