precise ui

Eine vollständige Meinungskomponentenbibliothek mit minimalen Abhängigkeiten, die von Zeiss betrieben werden.

Die UI-Komponentenbibliothek enthält sowohl Designelemente mit sehr niedrigen Ebenen als auch kombinierte Designelemente auf hoher Ebene. Im Allgemeinen besteht die Absicht der Bibliothek darin, die Entwicklung zu vereinfachen, indem Komponenten aufgedeckt werden, die Designspezifikationen erfüllen und eine einfache Programmierung bieten. Wiederholbare UI -Designs sollten daher nur Minuten statt Stunden dauern.

Weitere Informationen finden Sie unter https://precise-ui.io für unsere Küchenspüle (dh Demo-Seite veranschaulichen alle Komponenten inkl. Ihre Dokumentation).

Erste Schritte

Grundsätzlich sollte die gemeinsame Verwendung implizit sein, während die Flexibilität durch explizite Aussagen bereitgestellt wird. Daher streben wir nach (Meinung) Einfachheit, während wir in der Lage sind, so viel wie möglich anpassen zu können. Obwohl das Standarddesign für unser eigenes Hauptziel ziemlich genau eingestellt ist, möchten wir in diesem Bereich die volle Freiheit erreichen. Aus diesem Grund verbessern wir ständig, wie wir Themen durchführen und wie Komponenten freigelegt werden, um jede Art von Anpassung zu ermöglichen, die gewünscht werden kann.

Die präzise Benutzeroberfläche kann leicht in Ihr Frontend -Projekt durch Verwendung von NPM oder Garn integriert werden. Um es zu verwenden, befolgen Sie bitte die folgenden Anweisungen:

Installation

1. Zunächst müssen Sie es installieren:

npm i precise-ui

oder alternativ mit Garn

yarn add precise-ui

2. Stellen Sie dann sicher, dass Sie auch alle Peer -Abhängigkeiten installiert haben:

npm i react styled-components

Verwendung

Alles fertig, jetzt können Sie mit dem Importieren präziser UI-Komponenten beginnen.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

Auf unserer Website können Sie eine Liste aller verfügbaren Komponenten sehen.

Beitragen

Jeder ist herzlich eingeladen, einen Beitrag zur präzisen Benutzeroberfläche zu leisten. Vergewissern Sie sich jedoch, dass Sie unsere Beitragsanweisungen lesen.

Wenn Sie sich nicht sicher sind, ob Sie einen Beitrag leisten sollten oder nicht, kann Ihnen unser Verhaltenskodex helfen.

Probleme und Unterstützung

Wenn Sie eine Verwendung und allgemeine Fragen haben, können Sie mit dem Tag precise-ui eine Frage zum Stapelüberlauf stellen, und Sie erhalten so schnell wie möglich Hilfe.

Wenn Sie hier ein neues Problem erstellen, verwenden Sie bitte einen der bereitgestellten Vorlagen:

• Fehlerbericht
• Feature -Vorschlag

Entwicklung

Die folgenden Abschnitte führen Sie durch den Prozess der Entwicklung einer präzisen Benutzeroberfläche.

Installation

Für die Entwicklung benötigen Sie NPM und Node.js 8+. Nach dem Klonen des Repositorys installieren Sie alle Abhängigkeiten über

npm install

Hier ist ein kurzes Beispiel, um Ihnen den Einstieg zu erleichtern. Alles was Sie brauchen ist zu rennen:

npm start

Infolgedessen wird der Entwicklungsserver mit dem Spec (unsere Demo -Anwendung) mit dem Entwicklungsserver gestartet, der lokal ausgeführt wird und über Localhost: 6060 erreicht werden kann. Hinweis: Dieser Port kann geändert werden. Die verfügbare Seite enthält alle enthaltenen Komponenten und einige hoffentlich nützliche Dokumentation dafür.

Versioning

Das Inkrementieren der Version kann auch über npm erfolgen.

npm version

Dadurch wird die aktuelle Version angezeigt und nach einer neuen Version gefragt. Infolgedessen werden die Informationen im Paket.json aktualisiert. Zusätzlich wird ein Git -Tag mit den Informationen erstellt (automatisch mit einem "V" vorangestellt). Der Prozess könnte auch automatisiert werden, z. B. durch direkte Angabe der neuen Version. Wenn unsere neue Version beispielsweise "1.2.3" ist, verwenden wir nur den folgenden Befehl:

npm version --new-version 1.2.3

Konventionen

Wir verwenden keine Standardporte. Stattdessen sollte jeder Export ordnungsgemäß benannt werden. Für Komponenten entspricht der Name des Exports dem Namen seiner Datei oder des Ordners.

Ordner

Jede freiliegende Hauptkomponente muss in seinen eigenen Ordner unter components platziert werden. Komponenten, die in *.part.tsx -Dateien platziert sind, werden als interne Komponenten betrachtet, die nur für die Bereitstellung einer (erforderlichen) internen Struktur erstellt wurden.

Jede exponierte Konstruktionshelferkomponente muss in eine Datei im Ordner quarks platziert werden. Designhelfer beginnen mit einem Styled Präfix, genau wie die Komponenten der einfachen Stile sein sollten.

Jede Komponente höherer Ordnung (HOC) sollte sich im hoc Ordner befinden. Die Namenskonvention besteht darin, den HOC mit einem with Präfix aufzudecken.

Die kontextbezogenen Komponenten befinden sich im contexts .

Einheitliche funktionale Versorgungsunternehmen müssen in den Ordner utils platziert werden. Auch wenn alle Inhalte von Utils exportiert werden, sollten ihre Module direkt aus Komponenten verwiesen werden. Die Versorgungsunternehmen müssen so ziemlich selbsttragend sein, dh zu verweisen, dass sich die Back-Komponenten beziehen.

Namen

Während zu staatenlose Komponenten als const erstellt werden sollten, sollten staatliche Komponenten als class erstellt werden. Im ersteren Fall sollte nur eine Schnittstelle mit dem Namen der Komponente mit Props erstellt werden (um die Typierungen der Requisiten zu deklarieren). Im letzteren Fall sollte auch eine zusätzliche Schnittstelle mit dem Namen der Komponente mit State erstellt werden. Diese Schnittstelle enthält die Typinformationen für den internen Status der Komponente.

Eingabefeldkomponenten sollten immer mit Field sattiert werden. Ihre Requisiten sollten die InputProps -Schnittstelle erweitern.

Ereignisrequisiten sollten on werden und sie sollten nur ein einziges Argument haben. Dieses Argument muss ein Objekt sein, das einer Schnittstelle folgt, die einen angemessenen Namen für das Ereignis hat, das normalerweise aus dem Namen der Komponente, dem Ereignisart, und dem Event , z. B. für onChange eines TextField bestand, haben wir TextFieldChangeEvent .

Wir haben eine Vielzahl verschiedener Komponentenklassen. Wir sollten in der Lage sein, zwischen den verschiedenen Komponentenklassen leicht zu unterscheiden, indem wir das Suffix einer Komponente betrachten. Wir haben:

• *Control , Zustandsfunktionsfunktionskomponenten
• *Panel , Layout, das verwendet werden soll
• *Field , ein Eingangsfeld

Ausnahmen von dieser Konvention können aus verschiedenen Gründen (historisch, ästhetisch, ...) auftreten, sollten jedoch immer argumentiert und ordnungsgemäß diskutiert werden.

Codeformatierung

Es gibt nicht viel zu schreiben. Wir verwenden hübscher und unsere Build -Überprüfungen, wenn der Code ordnungsgemäß geschrieben wurde. Einfach rennen

npm run prettier

Wenn Sie Zweifel haben, dass Ihr Code ändert, passt zu unserer gewünschten Formatierung.

Unit -Tests

Jede Änderung muss im Unternehmen mit seinen jeweiligen Unit -Tests erfolgen. Um die Tests auszuführen, verwenden wir den folgenden Befehl:

npm run test

Dies wird auch den Linter ausführen. Die eigenständigen Unit -Tests sind über test:unit erhältlich. Ebenso können wir die Codeabdeckung auch problemlos melden:

npm run test:unit --coverage

Für Unit -Tests verwenden wir Scherz. Wir empfehlen die Verwendung von Snapshot -Tests (die über Enzym und einige JSON -Snapshot -Serializer durchgeführt werden).

Visuelle Tests

Visuelle Schnappschüsse befinden sich in /integration/__image_snapshots__ .

Wenn die Tests ausgeführt werden, wird Komponenten von [componentName]/Example.md renders Rendern hergestellt, Screenshots und vergleicht sie mit den Screenshots der vorherigen Version.

Um die testen lokal Docker auszuführen, sollte installiert werden.

npm run test:visual

Sobald eine Komponente geändert, hinzugefügt oder entfernt wurde, sollten Schnappschüsse aktualisiert werden. So aktualisieren Sie Schnappschüsse:

npm run test:visual -- -u

In einigen Fällen (dh Komponenten mit Animationen) ist es erforderlich, den Test zu überspringen. Dies kann im nächsten Weg erfolgen: Aktualisieren Sie Beispiel.MD -Datei:

 ```js { "props": { "data-skip": true } }

<Component />

In einigen Fällen ist es erforderlich, den visuellen Test zu warten, bevor sie einen Schnappschuss durchführen. Dies kann im nächsten Weg erfolgen: Aktualisieren Sie Beispiel.MD -Datei:

 ```js { "props": { "data-wait": 500 } }

<Component />

Hinzufügen neuer Symbole

Die Liste aller importierten Symbole ist in /tools/icongen.config . Nach dem Ändern der Liste sollten Sie npm run icongen ausführen, oder sie werden auf Prepush ausgeführt.

Eine Veröffentlichung machen

Alle lösbaren Code sind im develop zusammengefasst. Um eine Version zu erstellen, erstellen Sie einfach eine GitHub -Version (normalerweise kopieren Sie die aktuellen Einträge aus der Datei CHANGELOG.md ).

Ein Standard -Workflow sieht also aus wie:

1. Klonen Sie das Repository
2. Einen Zweig machen
3. Mach die Arbeit
4. Drücken Sie Ihre Änderungen
5. Machen Sie eine PR Ihrer Gabel / Ihrer Zweigstelle, um sich zu develop
6. Sobald "genügend" Funktionen in develop sind, machen Sie eine Github -Version
7. Stellen develop für die nächsten Änderungen sicher, dass Sie die Versionsnummer ändern / erhöhen

Um sich über die aktuell veröffentlichte Version zu informieren, haben Sie zwei Optionen. Entweder Sie gehen zur NPM -Seite oder verwenden die Github -Veröffentlichungen. Beide sind auch über dem Readme.MD verknüpft.

Lizenz

Die präzise UI wird mit der MIT -Lizenz veröffentlicht. Weitere Informationen finden Sie in der Lizenzdatei.

Wir verwenden einige Symbole aus Material UI -Ikonen. Ihr Code und ihr Design sind durch die jeweilige Lizenz der Material UI (MIT) abgedeckt.