Skip to content

rdkcentral/Lightning-UI-Components

Folders and files

NameName
Last commit message
Last commit date
Sep 19, 2024
Nov 15, 2022
Aug 11, 2023
Jan 9, 2024
Dec 3, 2024
Mar 20, 2024
Mar 21, 2023
Nov 2, 2022
Nov 9, 2023
Nov 2, 2022
Mar 20, 2024
May 30, 2024
Nov 9, 2023
Jan 17, 2023
Mar 3, 2023
Mar 3, 2023
Feb 24, 2023
Aug 23, 2024
Aug 23, 2024
Feb 24, 2023
Jan 9, 2024
Jun 30, 2023
Feb 24, 2023
Feb 24, 2023
Aug 23, 2024
Jun 30, 2023
Nov 9, 2023
Feb 24, 2023
Mar 20, 2024
Mar 21, 2023
Sep 27, 2024
Sep 21, 2022
Dec 17, 2024

Repository files navigation

Lightning UI

This library contains shared Lightning components, you can view our live Storybook documentation to learn more about each component and how to leverage them in your application.

In order to facilitate the development process for our theming architecture we have converted this project into a monorepo using Yarn workspaces. This allows engineers to work across multiple packages without the need for npm link or yarn link. This also has some other benefits including easy visibility across different @lightningjs/ui packages, standardization, and better release management.

Three packages are currently maintained and released from this project.

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

Local Development

To run the repository locally, run:

yarn install
yarn start

This will launch Storybook at http://localhost:8000/.

Peer Dependencies

@lightningjs/ui-components has a peer dependency on @lightningjs/core^2.x. If you are stuck using the old Lightning, i.e. wpe-lightning^1.x, you will need to alias @lightningjs/core in your build process. If you are bundling your app using Webpack, you should add this to your config:

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

NOTE: aliasing @lightningjs/core to point to wpe-lightning is not guaranteed to work with everything! Consider updating your Lightning library as soon as possible.

Installation

Install from NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components has a peer dependency on the Lightning package

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

Usage

You should import components using ES6 named imports, like so:

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

You should NOT use path imports like this:

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

Since packages are now bundled with rollup this allows proper tree shaking behavior. For more information on tree shaking the @material/ui documentation has a great guide on development bundle size (note: this is external documentation otherwise unrelated to this project!).

Use components in your application

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

Questions???

Submit a GitHub Issue or Join us on Slack!