Lightning UI Components

Ui Lightning

Esta biblioteca contém componentes de raios compartilhados, você pode visualizar nossa documentação ao vivo do livro de histórias para saber mais sobre cada componente e como aproveitá -los em seu aplicativo.

Para facilitar o processo de desenvolvimento de nossa arquitetura de temas, convertemos esse projeto em um monorepo usando os espaços de trabalho de Yarn. Isso permite que os engenheiros trabalhem em vários pacotes sem a necessidade de npm link ou yarn link . Isso também tem outros benefícios, incluindo fácil visibilidade em diferentes pacotes @LightningJs/UI, padronização e melhor gerenciamento de lançamentos.

Atualmente, três pacotes são mantidos e liberados neste projeto.

• @LightningJs/UI-Components
• @LightningJs/UI-Components-test-Utils
• @LightningJs/UI-Components-Theme-Base

Desenvolvimento local

Para executar o repositório localmente, execute:

 yarn install
yarn start

Isso lançará o Storybook em http: // localhost: 8000/.

Dependências de pares

@lightningjs/ui-components tem uma dependência de colegas em @lightningjs/core^2.x . Se você estiver preso usando o Antigo Lightning , ou seja, wpe-lightning^1.x , precisará de alias @lightningjs/core em seu processo de construção. Se você estiver agrupando seu aplicativo usando o webpack, adicione -o à sua configuração:

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

Nota: Aliasing @lightningjs/core a apontar para wpe-lightning não é garantido para trabalhar com tudo! Considere atualizar sua biblioteca de raios o mais rápido possível.

Instalação

Instale a partir do NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components tem uma dependência de colegas do pacote Lightning

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

Uso

Você deve importar componentes usando as importações de nome de ES6, como assim:

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

Você não deve usar importações de caminho como esta:

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

Como os pacotes agora são incluídos com o Rollup, isso permite o comportamento adequado da trêmula de árvores. Para obter mais informações sobre a troca de árvores, a documentação do @material/ui possui um ótimo guia sobre o tamanho do pacote de desenvolvimento ( Nota : esta é uma documentação externa não relacionada a este projeto!).

Use componentes em seu aplicativo

 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' ) ;
  }
} 

Questões???

Envie uma edição do Github ou junte -se a nós no Slack!