precise ui
2.1.17
Zeissが搭載した最小限の依存関係を備えた完全な意見の反応コンポーネントライブラリ。
UIコンポーネントライブラリには、非常に低レベルの設計要素と、組み合わせた高レベルの設計要素の両方が含まれています。一般に、ライブラリの意図は、設計仕様を満たし、プログラミングを容易にするコンポーネントを公開することにより、開発を簡素化することです。したがって、繰り返し可能なUIデザインは、数時間ではなく数分しかかかりません。
キッチンシンクについては、https://precise-ui.ioを参照してください（つまり、ドキュメントを含むすべてのコンポーネントを示すデモページ）。
基本的に、一般的な使用法は暗黙的でなければなりませんが、柔軟性は明示的なステートメントによって提供されます。そのため、可能な限りカスタマイズできる一方で、（意見のある）シンプルさを目指しています。標準設計は私たち自身の主要なターゲットにほぼ設定されていますが、その分野で完全な自由を達成したいと考えています。このため、私たちはテーマの方法とコンポーネントを公開する方法を常に改善して、望まれる可能性のあるカスタマイズを可能にします。
正確なUIは、NPMまたはYARNを使用して、フロントエンドプロジェクトに簡単に統合できます。使用を開始するには、以下の手順に従ってください。
npm i precise-uiまたは、糸の使用
yarn add precise-uinpm i react styled-components準備が整っているすべての準備ができました。これで、Precise-UIコンポネットのインポートを開始できます。
import { TextField } from 'precise-ui' ;
< TextField label = "Label" />当社のWebサイトで利用可能なすべてのコンポーネントのリストを表示できます。
誰もが正確なUIに貢献することを歓迎します。ただし、開始する前に、貢献の指示を必ずお読みください。
あなたが貢献すべきかどうか不確かな場合、私たちの行動規範があなたを助けることができるかもしれません。
使用法と一般的な質問がある場合は、タグprecise-uiを使用してStack Overflowについて質問することをお勧めします。
また、ここで新しい問題を作成するときは、提供されたテンプレートのいずれかを使用してください。
次のセクションでは、正確なUIを開発するプロセスをご案内します。
開発には、npmとnode.js 8+が必要です。リポジトリをクローニングした後、すべての依存関係を介してインストールします
npm installここにあなたが始めるための簡単な例があります。必要なのは実行することだけです：
npm startその結果、これにより、キッチンシンク（デモアプリケーション）を実行している開発サーバーが開始されます。これは、ローカルで実行され、LocalHost：6060を介してアクセスできます。注：このポートを変更できます。利用可能なページには、すべてのコンポーネントと、これらのためのいくつかの有用なドキュメントが含まれています。
バージョンの増分もnpmを介して実行できます。
npm versionこれにより、現在のバージョンが表示され、新しいバージョンが必要になります。その結果、package.jsonの情報が更新されます。さらに、情報タグが情報で作成されます（「V」を使用して自動的にプレフィックスされます）。たとえば、新しいバージョンを直接指定することにより、プロセスを自動化することもできます。したがって、たとえば、新しいバージョンが「1.2.3」の場合、次のコマンドを使用するだけです。
npm version --new-version 1.2.3デフォルトのエクスポートは使用しません。代わりに、すべてのエクスポートに適切に命名する必要があります。コンポーネントの場合、エクスポートの名前はファイルまたはフォルダーの名前に等しくなります。
フォルダー
露出したすべてのメインコンポーネントは、 componentsの下の独自のフォルダーに配置する必要があります。 *.part.tsxファイルに配置されたコンポーネントは、一部の（必要な）内部構造を提供するためにのみ作成された内部コンポーネントと見なされます。
すべての露出した設計ヘルパーコンポーネントは、 quarksフォルダーのファイルに配置する必要があります。デザインヘルパーは、プレーンスタイルのコンポーネントがそうであるように、 Styledプレフィックスから始めます。
高次コンポーネント（HOC）は、 hocフォルダーに配置する必要があります。命名規則は、接頭辞with AでHOCを公開することです。
コンテキスト関連コンポーネントは、 contextsフォルダーにあります。
プレーン機能ユーティリティは、 utilsフォルダーに配置する必要があります。便利なため、UTILのすべてのコンテンツがエクスポートされますが、そのモジュールは任意のコンポーネントから直接参照する必要があります。ユーティリティはほとんど自立している必要があります。つまり、バックコンポーネントを参照することは禁止されています。
命名
ステートレスコンポーネントはconstとして作成する必要がありますが、 Statefullコンポーネントはclassとして作成する必要があります。前者の場合、 Propsで接尾辞が付いているコンポーネントの名前を含むインターフェイスのみを作成する必要があります（小道具のタイピングを宣言するため）。後者の場合、 Stateで接尾辞が付けられたコンポーネントの名前を含む追加のインターフェースも作成する必要があります。このインターフェイスには、コンポーネントの内部状態のタイプ情報が搭載されています。
入力フィールドコンポーネントは、常にFieldで接尾辞を付ける必要があります。彼らの小道具は、 InputPropsインターフェイスを拡張する必要があります。
イベントの小道具はonに付く必要があり、単一の引数のみが必要です。この引数は、イベントに適切な名前を持つインターフェイスに従うオブジェクトでなければなりません。通常は、コンポーネントの名前、イベントタイプで構成され、たとえばTextFieldChangeEvent TextFieldのonChangeのためのEventで接尾辞を作成します。
さまざまなコンポーネントクラスがあります。コンポーネントの接尾辞を見ることにより、さまざまなクラスのコンポーネントを簡単に区別できるはずです。我々は持っています：
*Control 、ステートフルな機能コンポーネント*Panel 、使用するレイアウト*Field 、入力フィールドこの条約の例外は、さまざまな理由（歴史的、美的、...）のために発生する可能性がありますが、常に適切に推論し、議論する必要があります。
書くことはあまりありません。 Codeが適切にプレゼントされているかどうかは、きれいとビルドチェックを使用します。実行するだけです
npm run prettierコードが変更されていることが疑わしい場合は、目的のフォーマットに適合します。
変更は、それぞれのユニットテストを伴う必要があります。テストを実行するために、次のコマンドを使用します。
npm run testこれにより、リナーも実行されます。スタンドアロン単位テストは、 test:unitを介して利用できます。同様に、コードカバレッジを簡単に報告することもできます。
npm run test:unit --coverageユニットテストでは、Jestを使用します。スナップショットテスト（酵素とJSON Snapshot Serializerを介して行われる）を使用することをお勧めします。
視覚的なスナップショットは/integration/__image_snapshots__にあります。
テストが実行されると、 [componentName]/Example.mdからコンポーネントをレンダリングし、スクリーンショットを作成し、以前のバージョンのスクリーンショットと比較します。
テストを実行するには、ローカルでDockerをインストールする必要があります。
npm run test:visualコンポーネントが変更、追加、または削除されたら、スナップショットを更新する必要があります。スナップショットを更新するには：
npm run test:visual -- -u場合によっては（つまり、アニメーション付きのコンポーネント）、テストをスキップする必要があります。次の方法で行うことができます：example.mdファイルを更新：
```js { "props": { "data-skip": true } }
<Component />
場合によっては、スナップショットを行う前に視覚的なテストに待つように伝える必要があります。次の方法で行うことができます：example.mdファイルを更新：
```js { "props": { "data-wait": 500 } }
<Component />
すべてのインポートされたアイコンのリストは/tools/icongen.configにあります。リストを変更した後、 npm run icongen実行するか、プリプレシで実行されます。
すべての解放可能なコードは、 developブランチに集約されます。リリースするには、GitHubリリースを作成するだけです（通常、 CHANGELOG.mdファイルから現在のエントリをコピーします）。
したがって、標準のワークフローは次のようになります。
developためのフォーク /ブランチのPRを作成するdevelopに集約された「十分な」機能がGitHubリリースを作成するとdevelopの次の変更については、バージョン番号を変更 /増分してください現在リリースされたバージョンについて調べるには、2つのオプションがあります。 NPMページに移動するか、GitHubリリースを使用します。どちらもreadme.mdの上にリンクされています。
Precise UIはMITライセンスを使用してリリースされます。詳細については、ライセンスファイルを参照してください。
マテリアルUIアイコンのアイコンを使用しています。それらのコードとデザインは、材料UI（MIT）のそれぞれのライセンスでカバーされています。
