Lightning UI Components

UI Lightning

Esta biblioteca contiene componentes de relámpagos compartidos, puede ver nuestra documentación de libros de cuentos en vivo para obtener más información sobre cada componente y cómo aprovecharlos en su aplicación.

Para facilitar el proceso de desarrollo de nuestra arquitectura temática, hemos convertido este proyecto en un monorreo utilizando espacios de trabajo de hilo. Esto permite a los ingenieros trabajar en múltiples paquetes sin la necesidad de npm link o yarn link . Esto también tiene algunos otros beneficios, incluida la fácil visibilidad en diferentes paquetes de @rightningjs/UI, estandarización y una mejor gestión de liberación.

Actualmente se mantienen tres paquetes de este proyecto.

• @Lightningjs/UI-Components
• @rightningjs/ui-components-test-utils
• @Lightningjs/UI-Components-Theme-Base

Desarrollo local

Para ejecutar el repositorio localmente, ejecute:

 yarn install
yarn start

Esto lanzará Storybook en http: // localhost: 8000/.

Dependencias de pares

@lightningjs/ui-components tiene una dependencia de pares en @lightningjs/core^2.x . Si está atrapado usando el Lightning antiguo , es decir, wpe-lightning^1.x , deberá alias @lightningjs/core en su proceso de construcción. Si está agrupando su aplicación usando Webpack, debe agregar esto a su configuración:

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

NOTA: @lightningjs/core wpe-lightning ¡ ¡¡ Considere actualizar su biblioteca de rayos lo antes posible.

Instalación

Instalar desde NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components tiene una dependencia de pares en el paquete Lightning

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

Uso

Debe importar componentes utilizando ES6 llamadas importaciones, como así:

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

No debe usar las importaciones de ruta como esta:

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

Dado que los paquetes ahora están incluidos con el encierro, esto permite el comportamiento adecuado de agitación de los árboles. Para obtener más información sobre la sacudida de los árboles, la documentación de @material/ui tiene una excelente guía sobre el tamaño del paquete de desarrollo ( nota : ¡esta es una documentación externa que de otro modo no no está relacionada con este proyecto!).

Use componentes en su aplicación

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

¿¿¿Preguntas???

¡Envíe un problema de GitHub o únase a nosotros en Slack!