@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/README.md

@@ -1,237 +1,152 @@
-# Material-UI docs
+<p align="center">
+  <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="150" src="https://material-ui.com/static/images/material-ui-logo.svg" alt="Material-UI logo"></a></p>
+</p>
 
-Voici la documentation du site HiPay Material-UI.
+<h1 align="center">Material-UI</h1>
 
-Avant de commencer, il faut vous familiariser avec REACT :
-- https://reactjs.org/
-- https://reactjs.org/docs/optimizing-performance.html
-Et connaitres les [best practices](#best-practices)
+<div align="center">
 
+[React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html).
 
-## Lancer le projet
+[![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)
+[![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core)
+[![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/master.svg)](https://circleci.com/gh/mui-org/material-ui/tree/master)
+[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/master.svg)](https://codecov.io/gh/mui-org/material-ui/branch/master)
+[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
+![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI)
+[![PeerDependencies](https://img.shields.io/david/peer/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=peer)
+[![Dependencies](https://img.shields.io/david/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui)
+[![DevDependencies](https://img.shields.io/david/dev/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=dev)
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](http://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue")
 
-#### Via docker
-Il faut que sur votre poste soit installés
-- [Docker](https://www.docker.com/community-edition) (minimum version 17)
-- [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
+</div>
 
-Puis lancez les commandes
+## Installation
+
+Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
+
+**[Stable channel v1](https://material-ui.com/)**
 ```sh
-docker-compose build
-docker-compose up -d
+// with npm
+npm install @material-ui/core
 
-# En cas d'erreurs, vérifiez les logs
-docker-compose logs -f
+// with yarn
+yarn add @material-ui/core
 ```
-Le site est dispo à cette URL:
-[http://localhost:3222](http://localhost:3222)
 
-#### En local
-Il faut que sur votre poste soit installés
-- [node](https://nodejs.org/fr/) (minimum version LTS 8.9.4)
-- [npm](https://www.npmjs.com/) (minimum version 5.6.0)
-
-Puis lancez les commandes
+**[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/))
 ```sh
-npm install
-
-# En mode dev :
-npm start
-# équivaut à
-npm run docs:dev
+// with npm
+npm install material-ui
 
-# En mode prod :
-npm run docs:build
-npm run docs:start
+// with yarn
+yarn add material-ui
 ```
-Le site est dispo à cette URL:
-[http://localhost:3000](http://localhost:3000)
 
-## Best practices
-#### Patterns
-- single "source of truth" / top>down data flow
-https://reactjs.org/docs/lifting-state-up.html
-https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down
 
-- classique patterns
-https://reactpatterns.com
+Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
 
-- accéder au thème dans un composant (en dehors du style)
-export default withStyles(styles, { withTheme: true })(CellStatus);
-ne plus utiliser la notation
-export default withStyles(styles)(withTheme()(CellStatus));
+## Supporting Material-UI
 
-#### Optimisation
-- Faire attention au Lifecycle ! ne pas introduire de boucle infinie en "updatant" le state d'un composant dans une mauvaise phase. (voir schéma ci-dessous).
-Si le composant à besoin d'accéder à son DOM (pour redéfinir sa taille...), on préfère le gérer en js pur pour ne pas refaire un cycle (voir la gestion des scrolls dans HiTable/HiTable.js ou l'ellipse au milieu dans HiTable/BodyCells/CellText.js )
-<img width="800" src="/static/react-lifecycle.png" alt="react-lifecycle">
+Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:
+- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
+- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).
 
-- Comprendre la différence entre React.Component & React.PureComponent
-https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
+#### What's the difference between Patreon and OpenCollective?
 
-- Comprendre le principe de réconciliation pour optimiser les ensembles de composants (listes, tableaux...) -> use "key" !
-https://reactjs.org/docs/lists-and-keys.html
-https://reactjs.org/docs/reconciliation.html
+Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI.
+Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members.
+Your name/logo will receive proper recognition and exposure by donating on either platform.
 
-- Attention aux refs et aux mutations
-ex: ne pas passer une arrow fonction directement dans les props d'un composant. Même pour y inclure un index ou une valeur contextuelle !
+### Gold Sponsors
 
-## Contribuer
+Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 
-#### A savoir
-- Notre projet sur JIRA : [PSYCHE - Production](https://jira.hipay.org/secure/RapidBoard.jspa?rapidView=90&projectKey=PSYCHE)
-- Pour ouvrir nos features, nous utilisons [git flow](https://danielkummer.github.io/git-flow-cheatsheet/)
-Après avoir cloner le projet, il faudra lancer la commande `git flow init`  **depuis la master**
+via [Patreon](https://www.patreon.com/oliviertassinari)
 
-```sh
-git clone git@gitlab.hipay.org:backend/hipay-material-ui.git
-git checkout master
-git flow init
-# Tapez "Entrée" pour toutes les questions
-```
+<p style="display: flex;">
+  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank"><img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes"></a>
+  <a href="https://bitsrc.io" rel="noopener" target="_blank"><img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code"></a>
+</p>
 
-- Tous les composants sont dans le dossier /src.
-- Nos composants HiPay doivent être préfixés par "Hi", par exemple HiTable, HiButton...
-- Pour un code bien formatter, on utilise [ESLint - Prettier](#eslint-prettier)
-- Pour activer ESLint sur PHPStorm : File -> Settings -> Languages & Frameworks -> Code Qaulity Tools -> ESLint -> Enable
+via [OpenCollective](https://opencollective.com/material-ui)
 
-#### Pour rajouter de la documentation dans les démos
-[Lire ce guide](https://github.com/callemall/material-ui/blob/v1-beta/CONTRIBUTING.md)
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/0/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/0/avatar.svg" alt="0" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/1/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/1/avatar.svg" alt="1" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/2/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/2/avatar.svg" alt="2" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/3/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/3/avatar.svg" alt="3" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/4/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/4/avatar.svg" alt="4" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/5/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/5/avatar.svg" alt="5" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/6/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/6/avatar.svg" alt="6" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/7/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/7/avatar.svg" alt="7" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/8/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/8/avatar.svg" alt="8" /></a>
+<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/9/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/9/avatar.svg" alt="9" /></a>
 
-#### Pour rajouter des composants dans la liste "API"
-Il faut les rajouter tout en haut du markdown de la page dans la liste des "components:"
-Par exemple sur la page des tableaux : http://localhost:3000/demos/tables
-=> Il faut les rajouter au fichier [hi-table.md](docs/src/pages/demos/hi-table/hi-table.md)
+### There is more!
 
-#### Workflow d'une feature
-- S'affecter la tâche JIRA et la passer à "dev in progress" (projet [PSYCHE - Production](https://jira.hipay.org/secure/RapidBoard.jspa?rapidView=90&projectKey=PSYCHE))
-- Ouvrir la feature via git flow
+See the full list of [our backers](/BACKERS.md).
 
-```sh
-git flow feature start PSYCHE-XXX
-```
+## Usage
 
-- Avant de commiter ou pusher, il faut vérifier la [Definition Of Done](https://docs.google.com/spreadsheets/d/1qYanLfy2k_VYuclar3aAWSUo9b3soI48ZCjkKK83Rr0/edit?usp=drive_web&ouid=102268869535987309171)
-- Les [tests unitaires](#tests) doivent passer
-- La [génération des apis](#generation-des-apis) aussi
-- Le code doit être bien formatter : [ESLint - Prettier](#esLint-prettier)
-- commit + push
-- Faire la demande de merge request sur la develop
-- La revue se fera par un membre de l'équipe PSYCHE
+Here is a quick example to get you started, **it's all you need**:
 
-## Génération des apis
-```sh
-npm run docs:api
-```
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Button from '@material-ui/core/Button';
 
-## Tests
-Tous les composants doivent avoir leur test à côté (fichier .spec.js)
-On utilise [mocha](https://mochajs.org/), [chai](http://chaijs.com/) et [enzyme](http://airbnb.io/enzyme/docs/api/)
+function App() {
+  return (
+    <Button variant="raised" color="primary">
+      Hello World
+    </Button>
+  );
+}
 
-##### Jouer tous les tests
-```sh
-npm run test:unit
+ReactDOM.render(<App />, document.querySelector('#app'));
 ```
 
-##### Jouer les tests sur un seul composant
-```sh
-yarn run mocha src/AdvancedTable/BodyCells/CellAccount.spec.js
-```
+Yes, it's really all you need to get started as you can see in this live and interactive demo:
 
-#### Vérifier la couverture de code
-```sh
-npm run test:coverage
-# ou pour avoir le rendu html :
-npm run test:coverage:html
-```
-La couverture de code html se trouvera dans le dossier [coverage](coverage)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4)
 
-#### Calcul de couverture sur un seul composant
-```sh
-yarn cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha src/HiTable/BodyCells/CellAccount.spec.js  && nyc report -r lcovonly
-```
+## Questions
 
-## ESLint - Prettier
-Pour le bon formattage des fichiers, on utilise [Prettier](https://prettier.io/docs/en/install.html) avec la conf EsLint
-La conf se trouve dans le fichier [prettier.config.js](prettier.config.js)
-Toutes les options : [https://prettier.io/docs/en/options.html](https://prettier.io/docs/en/options.html)
+For *how-to* questions and other non-issues,
+please use [StackOverflow](http://stackoverflow.com/questions/tagged/material-ui) instead of Github issues.
+There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
 
-#### Installer prettier en global
-```sh
-yarn global add prettier
-```
+## Examples
 
-#### Utilisation [voir doc](https://prettier.io/docs/en/cli.html)
+Are you looking for an example project to get started?
+[We host some](https://material-ui.com/getting-started/example-projects/).
 
-#### Vérifier le fichier de config utilisé
-```sh
-prettier --find-config-path src/HiForm/HiInput.js
-```
+## Documentation
 
-#### Forcer le formatage d'un fichier
-```sh
-prettier --write src/HiForm/HiInput.js
-```
+Check out our [documentation website](https://material-ui.com/).
 
-## Publish
-Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hipay/hipay-material-ui
+## Contributing
 
-#### Publier une nouvelle version
+We'd greatly appreciate any [contribution](/CONTRIBUTING.md) you make. :)
 
-1. Changer la version dans package.json
-2. Build
-```sh
-npm run build
-```
-3. Publish
-```sh
-cd build
-npm login
-# Username: hipay
-# Password: (voir avec la tribu PSYCHE)
-npm publish
-```
+## Changelog
 
-# Si ERR d'authenitifcation
-npm adduser
-admin
-admin123
+Recently Updated?
+Please read the [changelog](https://github.com/mui-org/material-ui/releases).
 
-# pour le premier publish, modifier .npmrc
-vi ~/.npmrc
-# Mettre
-registry=http://jira-nexus.hipay-pos-platform.com:8081/repository/npm-private/
-_auth="YWRtaW46YWRtaW4xMjM="
-```
+## Roadmap
 
-## Troubleshooting
-
-### Upgrade node :
-```sh
-sudo npm cache clean -f
-sudo npm install -g n
-sudo n stable
-```
+The future plans and high priority features and enhancements can be found in the [ROADMAP.md](https://material-ui.com/discover-more/roadmap/) file.
 
-### Lorsqu'on lance la commande pour générer les apis :
-Erreur : Cannot read property 'name' of undefined
-=> Une props est présente dans les défaultProps mais pas déclarée dans propTypes
+## Thanks
 
-### Lorsqu'on rajoute une page demo :
-**Cannot read property 'js' of undefined**
-=> dans le fichier markdown du dossier docs/src/pages/demos/[VOTRE-DEMO]/votre-demo.md, la demo pointe sur un fichier qui n'existe pas.
-Ou bien la demo n'existe pas dans le fichier js du dossier pages/demos/votre-demo.js
+[<img src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
 
-**Cannot read property 'toLowerCase' of undefined**
-=> un composant qu'on importe n'est pas exporter. Vérifier le fichier index.js à la racine du dossier du composant en question dans src/
+Thank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
 
-**Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `SelectSuggestWithLabel`.**
-=> on importe mal un composant, par exemple
-```import { HiFormControl } from 'material-ui/Form';```
-au lieu de
-```import { HiFormControl } from 'hipay-material-ui/HiForm';```
+## License
 
-### Problème d'import dans front-react
-Attention aux index.js.
-La bonne syntaxe est :
-export { default as MyComponente } from './MyComponente';
+This project is licensed under the terms of the
+[MIT license](/LICENSE).