precise ui
2.1.17
Une bibliothèque de composants React complète avec des dépendances minimales alimentées par Zeiss.
La bibliothèque des composants d'interface utilisateur contient les deux éléments de conception de très bas niveau ainsi que les éléments de conception de haut niveau combinés. En général, l'intention de la bibliothèque est de simplifier le développement en exposant des composants qui satisfont les spécifications de conception et offrent une facilité de programmation. Les conceptions d'interface utilisateur reproductibles ne devraient donc prendre que des minutes au lieu des heures.
Voir https://precise-Ui.io pour notre évier de cuisine (c'est-à-dire une page de démonstration illustrant tous les composants, y compris leur documentation).
Fondamentalement, l'utilisation commune doit être implicite tandis que la flexibilité est fournie par des instructions explicites. En tant que tels, nous visons la simplicité (d'opinion), tout en étant en mesure de personnaliser autant que possible. Même si la conception standard est à peu près définie pour notre propre objectif principal, nous voulons atteindre la pleine liberté dans ce domaine. Pour cette raison, nous améliorons constamment la façon dont nous faisons le thème et comment exposer les composants pour permettre toute sorte de personnalisation qui peut être souhaitée.
L'interface utilisateur précise peut être facilement intégrée dans votre projet Frontend en utilisant NPM ou YARN. Pour commencer à l'utiliser, veuillez suivre les instructions ci-dessous:
npm i precise-uiou alternativement, en utilisant du fil
yarn add precise-uinpm i react styled-componentsTout est prêt, vous pouvez maintenant commencer à importer des composants précis-UI.
import { TextField } from 'precise-ui' ;
< TextField label = "Label" />Vous pouvez voir une liste de tous les composants disponibles sur notre site Web.
Tout le monde est le bienvenu pour apporter toute contribution sur une interface utilisateur précise. Cependant, avant de commencer, assurez-vous de lire nos instructions de contribution.
Si vous vous sentez incertain si vous devez contribuer ou non, notre code de conduite peut vous aider.
Si vous avez une utilisation et des questions générales, vous êtes invités à poser une question sur Stack Overflow en utilisant la balise precise-ui , et vous recevrez de l'aide dès que possible.
De plus, lors de la création d'un nouveau problème ici, veuillez utiliser l'un des modèles fournis:
Les sections suivantes vous guident à travers le processus de développement d'une interface utilisateur précise.
Pour le développement, vous aurez besoin de NPM et Node.js 8+. Après le clonage, le référentiel installe toutes les dépendances via
npm installVoici un exemple rapide pour vous aider à démarrer. Tout ce dont vous avez besoin est de courir:
npm startEn conséquence, cela commencera le serveur de développement exécutant l'évier de la cuisine (notre application de démonstration), qui s'exécute localement et peut être atteint via LocalHost: 6060. Remarque: ce port peut être modifié. La page disponible contient tous les composants inclus et certains, espérons-le, une documentation utile pour ceux-ci.
L'incrémentation de la version peut également être effectuée via npm .
npm versionCela affichera la version actuelle et demandera une nouvelle version. En conséquence, les informations dans le package.json sont mises à jour. De plus, une balise GIT est créée avec les informations (automatiquement préfixées à l'aide d'un "V"). Le processus pourrait également être automatisé, par exemple, en spécifiant directement la nouvelle version. Ainsi, par exemple, si notre nouvelle version est "1.2.3", nous utilisons simplement la commande suivante:
npm version --new-version 1.2.3Nous n'utilisons pas les exportations par défaut. Au lieu de cela, chaque exportation doit être nommée correctement. Pour les composants, le nom de l'exportation est égal au nom de son fichier ou de son dossier.
Dossiers
Chaque composant principal exposé doit être placé dans son propre dossier sous components . Les composants placés dans les fichiers *.part.tsx sont considérés comme des composants internes uniquement créés pour fournir une structure interne (nécessaire).
Chaque composant de conception exposé doit être placé dans un fichier dans le dossier quarks . Les aides de conception commencent par un préfixe Styled , tout comme les composants de style simple devraient l'être.
Tout composant d'ordre supérieur (HOC) doit être situé dans le dossier hoc . La convention de dénomination est d'exposer le HOC with un préfixe.
Les composants liés au contexte sont situés dans le dossier contexts .
Les utilitaires fonctionnels simples doivent être placés dans le dossier utils . Même si pour la commodité, tous les contenus des utils sont exportés, leurs modules doivent être référencés directement à partir de tous les composants. Les services publics doivent être à peu près autonomes, c'est-à-dire que la référence des composants est interdite.
Dénouement
Bien que les composants apatrides doivent être créés en tant que const , les composants de manière states doivent être créés en class . Dans le premier cas, seule une interface avec le nom du composant suffixé avec Props doit être créée (pour déclarer les types des accessoires). Dans ce dernier cas, une interface supplémentaire avec le nom du composant suffixé avec State doit également être créée. Cette interface porte les informations de type pour l'état interne du composant.
Les composants de champ de saisie doivent toujours être suffixés avec Field . Leurs accessoires devraient étendre l'interface InputProps .
Les accessoires d'événement doivent être préfixés avec on et ils ne devraient avoir qu'un seul argument. Cet argument doit être un objet qui suit une interface, qui a un nom adéquat pour l'événement, composé généralement du nom du composant, du type d'événement, et étant suffixé avec Event , par exemple, pour onChange of a TextField , nous avons TextFieldChangeEvent .
Nous avons une variété de classes de composants différentes. Nous devrions être en mesure de distinguer facilement les différentes classes de composants en regardant le suffixe d'un composant. Nous avons:
*Control , composants fonctionnels avec état*Panel , mise en page à utiliser*Field , un champ de saisieDes exceptions à cette convention peuvent survenir pour diverses raisons (historiques, esthétiques, ...), mais doivent toujours être raisonnées et discutées correctement.
Il n'y a pas grand-chose à écrire. Nous utilisons plus jolis et notre construction vérifie si le code a été correctement matratifié. Juste courir
npm run prettierSi vous doutez que votre code modifie notre formatage souhaité.
Tout changement doit être en entreprise avec ses tests unitaires respectifs. Afin d'exécuter les tests, nous utilisons la commande suivante:
npm run test Cela exécutera également le Linter. Les tests unitaires autonomes sont disponibles via test:unit . De même, nous pouvons également signaler facilement la couverture du code:
npm run test:unit --coveragePour les tests unitaires, nous utilisons la plaisanterie. Nous vous recommandons d'utiliser des tests d'instantané (qui se font via enzyme et un sérialiseur JSON Snapshot).
Les instantanés visuels sont situés dans /integration/__image_snapshots__ .
Lorsque le test s'exécute, il rend les composants de [componentName]/Example.md , fait des captures d'écran et les compare aux captures d'écran de la version précédente.
Pour exécuter les tests localement, Docker doit être installé.
npm run test:visualUne fois le composant modifié, ajouté ou supprimé, les instantanés doivent être mis à jour. Pour mettre à jour les instantanés:
npm run test:visual -- -uDans certains cas (c'est-à-dire des composants avec des animations), il est nécessaire de sauter le test. Cela peut être fait de la prochaine voie: mettez à jour l'exemple.md Fichier:
```js { "props": { "data-skip": true } }
<Component />
Dans certains cas, il est nécessaire de dire au test visuel d'attendre avant de faire un instantané. Cela peut être fait de la prochaine voie: mettez à jour l'exemple.md Fichier:
```js { "props": { "data-wait": 500 } }
<Component />
La liste de toutes les icônes importées est dans /tools/icongen.config . Après avoir modifié la liste, vous devez exécuter npm run icongen ou il sera exécuté sur Prepush.
Tout le code de relance est agrégé dans la branche develop . Pour faire une version, créez simplement une version github (en copie généralement sur les entrées actuelles du fichier CHANGELOG.md ).
Un flux de travail standard ressemble donc à:
developdevelop faites une version githubdevelop assurez-vous de modifier / incrémenter le numéro de versionPour découvrir la version actuellement publiée, vous avez deux options. Soit vous allez sur la page NPM, soit vous utilisez les versions GitHub. Les deux sont également liés au-dessus de Readme.md .
L'interface utilisateur précise est libérée à l'aide de la licence MIT. Pour plus d'informations, consultez le fichier de licence.
Nous utilisons certaines icônes des icônes d'interface utilisateur de matériaux. Leur code et leur conception sont couverts par la licence respective de l'interface utilisateur matérielle (MIT).
