Lightning UI Components

稲妻UI

このライブラリには共有雷コンポーネントが含まれています。ライブストーリーブックのドキュメントを表示して、各コンポーネントの詳細とアプリケーションでそれらを活用する方法をご覧ください。

テーマアーキテクチャの開発プロセスを促進するために、このプロジェクトを糸ワークスペースを使用してモノレポに変換しました。これにより、エンジニアはnpm linkまたはyarn linkを必要とせずに複数のパッケージで作業できます。これには、異なる @LightningJS/UIパッケージにわたる簡単な可視性、標準化、およびより良いリリース管理など、他のいくつかの利点もあります。

現在、3つのパッケージが維持され、このプロジェクトからリリースされています。

• @lightningjs/ui-components
• @lightningjs/ui-components-test-utils
• @lightningjs/ui-components-theme-base

ローカル開発

リポジトリをローカルに実行するには、実行します。

 yarn install
yarn start

これにより、http：// localhost：8000/でストーリーブックが起動します。

ピア依存関係

@lightningjs/ui-components @lightningjs/core^2.xにピアに依存しています。古い稲妻、つまりwpe-lightning^1.xを使用して立ち往生している場合は、ビルドプロセスで@lightningjs/coreをエイリアスする必要があります。 Webpackを使用してアプリをバンドルしている場合は、これを構成に追加する必要があります。

 // in webpack.config.js
module . exports = {
  resolve : {
    alias : {
      '@lightningjs/core' : path . resolve ( __dirname , 'node_modules/wpe-lightning' )
    }
  }
} ;

注： @lightningjs/coreをwpe-lightningを指すのは、すべてで作業することは保証されていません！ Lightningライブラリをできるだけ早く更新することを検討してください。

インストール

NPMからのインストール：

npm install --save @lightningjs/ui-components

@lightningjs/ui-components Lightningパッケージにピアに依存しています

npm install -S @lightningjs/ui @lightningjs/core

使用法

次のように、ES6の名前付きインポートを使用してコンポーネントをインポートする必要があります。

 // App.js
import lng from '@lightningjs/core' ;
import { Button } from '@lightningjs/ui-components' ;

このようなパスインポートを使用しないでください。

 // Do not use
import Button from '@lightningjs/ui-components/components/Button' ;

パッケージはロールアップにバンドルされているため、適切な木の揺れる動作が可能になります。 Treeの詳細については、 @material/uiドキュメントが開発バンドルサイズに関する優れたガイドがあります（注：これは、このプロジェクトとは関係のない外部ドキュメントです！）。

アプリケーションでコンポーネントを使用します

 import { FocusManager } from '@lightningjs/ui-components' ;

class MyComponent extends lng . Component {
  static _template ( ) {
    return {
      FocusManager : {
        type : FocusManager ,
        direction : 'row' ,
        children : [ ]
      }
    } ;
  }
  _getFocused ( ) {
    return this . tag ( 'FocusManager' ) ;
  }
} 

質問???

github号を送信するか、Slackに参加してください！