precise ui
2.1.17
一個完整的自我反應組件庫，其依賴性最小的依賴性由Zeiss提供動力。
UI組件庫既包含非常低級的設計元素，也包含組合的高級設計元素。通常，圖書館的目的是通過揭示滿足設計規格並提供易於編程的組件來簡化開發。因此，可重複的UI設計應僅需幾分鐘而不是數小時。
有關我們的廚房水槽，請參見https://precise-ui.io（即演示頁面，說明了所有組件，包括其文檔）。
基本上，在明確的語句提供靈活性的同時，常見用法應是隱含的。因此，我們的目標是（自以為是）簡單，同時能夠盡可能自定義。儘管標准設計幾乎是我們自己的主要目標設定的，但我們仍希望在該領域實現完全的自由。因此，我們正在不斷改進我們的主題以及如何揭示組件以實現可能需要的任何自定義。
精確的UI可以通過使用NPM或紗線輕鬆地集成到您的前端項目中。要開始使用它，請按照以下說明進行操作：
npm i precise-ui或者，使用紗線
yarn add precise-uinpm i react styled-components一切準備就緒，現在您可以開始導入精確的UI組合。
import { TextField } from 'precise-ui' ;
< TextField label = "Label" />您可以在我們的網站上查看所有可用組件的列表。
歡迎每個人都為精確的UI做出任何貢獻。但是，在開始之前，請確保您閱讀我們的貢獻說明。
如果您不確定是否應該做出貢獻，我們的行為準則可以為您提供幫助。
如果您有任何用法和一般性問題，歡迎您使用標籤precise-ui在堆棧溢出上提出問題，您將盡快獲得幫助。
另外，在此處創建新問題時，請使用其中一個提供的模板：
以下部分指導您完成開發精確UI的過程。
為了開發，您將需要NPM和Node.js 8+。克隆存儲庫後通過
npm install這是一個讓您入門的快速示例。您需要運行的只是：
npm start結果，這將啟動運行廚房水槽（我們的演示應用程序）的開發服務器，該服務器可以在本地運行，可以通過Localhost：6060到達。注意：可以更改此端口。可用的頁麵包含所有包含的組件和一些有用的文檔。
也可以通過npm進行增量版本。
npm version這將顯示當前版本並要求新版本。結果，軟件包中的信息已更新。此外，使用信息創建一個git標籤（使用“ V”自動前綴）。該過程也可以通過直接指定新版本來自動化。因此，例如，如果我們的新版本為“ 1.2.3”，我們只使用以下命令：
npm version --new-version 1.2.3我們不使用默認導出。相反，每個導出都應正確命名。對於組件，導出的名稱等於其文件或文件夾的名稱。
文件夾
每個裸露的主組件都必須放在其自己的文件夾下方的components下方。位於*.part.tsx文件中的組件被認為是僅用於提供某些（必要的）內部結構的內部組件。
每個裸露的設計輔助組件都必須放在quarks文件夾中的文件中。設計助手的確從Styled前綴開始，就像普通樣式的組件一樣。
任何高階組件（HOC）都應位於hoc文件夾中。命名慣例是with前綴曝光a。
與上下文相關的組件位於contexts文件夾中。
普通功能實用程序必須放置在utils文件夾中。即使為方便起見，所有util的內容均已導出，也應直接從任何組件中引用它們的模塊。公用事業必須是自我維持的，即禁止引用後退組件。
命名
雖然應將無狀態組件作為const創建，但應將狀態成分作為class創建。在前一種情況下，只能創建帶有組件名稱Props的界面（以聲明道具的打字）。在後一種情況下，也應該創建與組件名稱後綴和State的附加接口。該接口包含組件內部狀態的類型信息。
輸入字段組件應始終用Field後綴。他們的道具應擴展InputProps接口。
事件道具應與on進行前綴，並且應只有一個參數。該參數必須是一個遵循接口的對象，該界面具有適當的事件名稱，通常由組件的名稱，事件類型組成，並與Event （例如，例如，對於TextField的onChange ，我們都有TextFieldChangeEvent 。
我們有各種不同的組件類。我們應該能夠通過查看組件的後綴來輕鬆區分不同類別的組件。我們有：
*Control ，狀態功能組件*Panel ，要使用的佈局*Field ，輸入字段該慣例的例外可能是由於各種原因（歷史，美學，...），但應始終正確地進行推理和討論。
沒有太多要寫的。我們使用更漂亮的，我們的構建檢查是否適當地修飾了代碼。只是跑
npm run prettier如果您懷疑您的代碼更改適合我們所需的格式。
任何更改都需要進行各自的單位測試。為了運行測試，我們使用以下命令：
npm run test這也將運行襯裡。獨立的單元測試可通過test:unit 。同樣，我們也可以輕鬆地報告代碼覆蓋範圍：
npm run test:unit --coverage對於單位測試，我們使用開玩笑。我們建議使用快照測試（通過酶和一些JSON快照序列化器完成）。
視覺快照位於/integration/__image_snapshots__中。
當測試運行時，它會從[componentName]/Example.md呈現組件，使屏幕截圖並將它們與以前的版本屏幕截圖進行比較。
要運行測試本地碼頭機。
npm run test:visual更改，添加或刪除組件後，應更新快照。更新快照：
npm run test:visual -- -u在某些情況下（即動畫組件），需要跳過測試。可以以更新的方式完成：更新示例.md文件：
```js { "props": { "data-skip": true } }
<Component />
在某些情況下，需要告訴視覺測試在進行快照之前等待。可以以更新的方式完成：更新示例.md文件：
```js { "props": { "data-wait": 500 } }
<Component />
所有導入圖標的列表在/tools/icongen.config中。修改列表後，您應該運行npm run icongen ，否則將在Prepush上運行。
所有可發布的代碼均在develop分支中匯總。要製作版本，只需創建一個github版本（通常通過CHANGELOG.md文件的當前條目複製）。
因此，標準工作流程看起來像：
developdevelop中匯總的功能使GITHUB釋放develop下一個更改，請確保更改 /遞增版本號要了解當前發布的版本，您有兩個選項。您要么轉到NPM頁面，要么使用GitHub版本。兩者也鏈接在readme.md之上。
精確的UI使用MIT許可證發布。有關更多信息，請參見許可證文件。
我們使用的是來自材料UI圖標的一些圖標。它們的代碼和設計由材料UI（MIT）的各自許可涵蓋。
