design react kitダウンロード - design react kitソースコードのダウンロード

design react kit

その他のソースコード

v5.5.0

ダウンロード

デザインReactキット

これを他の言語で読む：英語??。

ショ和注意：このキットは、2.xバージョンのBootstrap Italiaで動作するように設計されています。 Bootstrap Italiaのバージョン1.xのキットは廃止されており、Branch 4.xにあります。

イントロ

Design React Kitは、 Bootstrap ItaliaとUI Kit Designのスタイルを実装するReactコンポーネントのセットです。ライブラリをナビゲートしてコンポーネントを表示するために、ストーリーブックが使用されました。ストーリーブックの公開版は、公開された最新の安定したリリースのためにここで入手できます。 Playground React Kitは、図書館で遊ぶことができます。

索引

索引
- キットの使用方法
  - ブートストラップイタリーとフォントを追加します
  - 例
  - フォントの読み込み
  - ピア依存関係
- 貢献する方法は？
  - コードで
  - ローカル環境を設定します
- 新しいコンポーネントを作成する方法
  - スナップショットテスト
- 本棚の編集
- 便利なリンク
- ブラウザのサポート
- タイプスクリプトタイピング
- 図書館の貢献

キットの使用方法

React Designをアプリへの中毒として使用するには、NPMからインストールできます。次のように、 create viteを使用して新しいWebApp Reactを作成することをお勧めします。

yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save

Reactを使用して新しいアプリを作成するための詳細：

公式文書
vitejs

ブートストラップイタリーとフォントを追加します

design-react-kitはCSSとFontファイルが含まれていないため、個別にインストールする必要があります。

yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save

例

この時点で、使用している場合はCSSおよびフォントアプリに明示的にインポートするだけで、 ./src/App.jsファイル内にcreate vite 。

 import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;

function App ( ) {
  return < Alert > This is an Alert </ Alert > ;
}

export default App ;

このWebテンプレートをstackblitz：webテンプレートで参照できます

フォントの読み込み

Bootstrap Italiaテーマは、特定の書体フォントのセット（ titillium-web 、 roboto-mono 、 loraを使用しています。これらのフォントの読み込みはブラウザに残されていますが、必要に応じて、適切なFontLoaderコンポーネントを介して制御できます。 Reactアプリの上部にあるFontLoaderコンポーネントを宣言して、読み込みを許可します。

または、 webfontloaderパッケージを使用して、フォントのロードを手動で管理する必要があります。

 const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
  custom : {
    families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
  }
} ) ;

ピア依存関係

ライブラリには、バージョンの衝突を回避し、バンドルのサイズの役に立たない増加を避けて、 reactやreact-dom含まれていません。このため、地元の開発のために、依存症を手動で設置する必要があります。

実行されるコマンドはです

yarn install --peers

または、手動で

yarn install react react-dom

貢献する方法は？

？さまざまな方法で図書館に貢献することが可能です。

コードを使用すると、Openの問題を担当し、React Kitの問題にまだ割り当てられていない問題を担当しています（問題に関するコメントは、担当する意志を通知するのにも十分です）。
公式Reactキットリポジトリのバグまたは改善のレポートを通じて。
専用のスラックチャネルに書き込みます。

コードで

Design React Kitを支援しませんか？あなたは正しい場所にいます！

まだ行っていない場合は、PA Webサービスの設計ガイドラインに関する知識を深めるために数分を費やすことから始め、Design React Kitに貢献する方法に関する適応症を参照してください。

ローカル環境を設定します

ローカル環境の最小要件は次のとおりです。

nodejs（> = 18）
糸

リポジトリをクローンし、 yarnを実行して中毒をインストールします。その後、実行します

yarn storybook:serve

開発サーバーを起動します。

ストーリーブックは、http：// localhost：9001/で入手できます。

ストーリーブックは、より多くの話をするいくつかのaddonsで豊かにされています。

新しいコンポーネントを作成する方法

このセクションでは、リポジトリ内の新しいコンポーネントの作成をガイドします。すべてのコンポーネントはsrcフォルダーにあります。各コンポーネントには、機能させるために必要なすべてのフォルダーがあります。代わりにStorybook物語はstoriesの下にあります。ユニットテストはtestフォルダーにあります。たとえば、 Buttonコンポーネントはsrc/Buttonルートの下に存在し、その構造は次のとおりです。

 ├── src
│    └── Button
│        └── Button.tsx
├── stories
│    ├── Components
│    │   └── Button.stories.tsx
│    └── Documentation
│        └── Button.mdx
└── test
     └── Button.test.tsx

コンポーネントを構成するためのいくつかの基本的なルール：

コンポーネントのTSXファイルファイルは、JSX構文を使用します。
.stories.tsxファイルには、コンポーネント自体に関連するもののみを含める必要があります。
.mdxファイルには、コンポーネント自体に関するドキュメントのみを含める必要があります
.test.tsxファイルには、コンポーネント自体に関連するテストのみを含める必要があります。

新しいコンポーネントが作成されると、彼のストーリーで、Starting Storybookは、すべてが必要に応じて機能することを確認できます。

ドキュメント：

ストーリーブック
MDX

スナップショットテスト

テストシステムは、「スナップショット」テスト：ストーリーブックストーリーのコンテンツが特別なファイルにコピーされ、将来の変更を通知するために保存されます。これは、新しいストーリーの追加が、PRで「テスト」タスクの失敗にある可能性があることを意味します。新しいストーリーが追加された場合、またはすでに存在するストーリーが追加されている場合、次のようにスナップショットファイルを更新する必要があります。