open-index/open-npm huggingface dataset:
npm package: @refinitiv-data/types
Description: Copyright 2021 Refinitiv
Latest version: 3.14.0-beta

Copyright 2021 Refinitiv

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
npm package: @refinitiv-ui/configurations
Description: The configuration files used for Element Framework
Author: LSEG
Latest version: 7.1.2

# Element Framework Configurations

The package contains `eslint` and `TypeScript` configurations used for Element Framework development.

Use [ESLint](https://eslint.org/) to lint your es6 code.

Use [TypeScript](https://www.typescriptlang.org/) to keep the code easier to deploy, read and debug.

Configurations are used across all Element Framework components for consistency and code quality.

## Installation

```shell
npm install @refinitiv-ui/configurations --save-dev
```

This will install the following files:

- `eslint-config.js` - generic ESLint configuration
- `typescript.eslint-config.js` - extends of `eslint-config.js` with support of recommended linting for TypeScript
- `tsconfig.json` - development TypeScript parser configurations to meet ES6 specs
- `prod.tsconfig.json`- extends `tsconfig.json` to provide production configurations

You can override/use your own files to meet project requirements.

## TypeScript support

Below configurations are used with TypeScript (Element Framework v7).

### .eslintrc

Your project level (local) `.eslintrc`:

```json
{
  "root": true,
  "extends": ["./node_modules/@refinitiv-ui/configurations/typescript.eslint-config.js"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}
```

`eslint` from version 6 does not support global modules and cannot resolve extensions by generic package name. Therefore you must ensure that `extends` contain the full path to the location of this module.

### tsconfig.json

Your project level `tsconfig.json`:

```json
{
  "extends": "@refinitiv-ui/configurations/tsconfig.json"
}
```

## No TypeScript support

Below configurations are used when TypeScript is not required.

### .eslintrc

Your project level (local) `.eslintrc`:

```json
{
  "root": true,
  "extends": ["./node_modules/@refinitiv-ui/configurations/eslint-config.js"]
}
```

## Usage

Modern IDE should pick up configurations automatically and apply to the project.
npm package: @refinitiv-ui/core
Description: Element Framework Core
Author: LSEG
Latest version: 7.5.5

# Core Components for Element Framework

Core functionality for building Element Framework elements, it exports the following classes:

## Basic Element

A base class for extending simple element that have minimal functionality.

```js
import { BasicElement } from '@refinitiv-ui/core';
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';

@customElement('my-avatar')
class MyAvatar extends BasicElement {
  ...
}
```

## Control Element

A base class for extending control element, usually referred to as form elements. These controls have additional functionality, such as, disabled and read-only states.

```js
import { ControlElement } from '@refinitiv-ui/core';
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';

@customElement('my-button')
class MyButton extends ControlElement {
  ...
}
```

## Responsive Element

A base class for extending element which needs to respond to their dimensions e.g data visualizations. The base class provides resize observer callback which will trigger whenever that the element's dimensions are changed.

```js
import { ResponsiveElement } from '@refinitiv-ui/core';
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';

@customElement('my-chart')
class MyChart extends ResponsiveElement {
  ...
}
```

<br>

# Helper for Deprecation Notices

The core provides a way of showing uniform deprecation notices, when deprecated features are used in elements.

```js
import { BasicElement, DeprecationNotice } from '@refinitiv-ui/core';

class MyElement extends BasicElement {

  private deprecationNotice = new DeprecationNotice(
    'The feature of hopping has be replaced by skipping. Please update to use the latest API.',
    'https://a.support.link'
  )

  private showDeprecationNotice () {
    // you can some logic to check if deprecated features are being used
    if (!this.deprecationNotice.shown && deprecatedFeatureUsed) {
      this.deprecationNotice.show();
    }
  }

}
```

<br>

# Error Handling

All errors handling in the core should use the `GenericError` class. Also, where possible, you should provide an additional support URL. Additional error types can be added to `./src/errors/`.

```js
import { GenericError } from './src/errors/GenericError';

throw new GenericError(
  // Message
  'Something has gone wrong',
  // Support URL
  'https://support/error/something'
);
```
npm package: @refinitiv-ui/demo-block
Description: Demo page handler for Element Framework elements
Author: LSEG
Latest version: 7.2.5

# Demo Block Element

A custom element that can wrap around any other elements for demo and development purpose.

## Installation

```sh
npm install -D @refinitiv-ui/demo-block
```

## Usage

Include demo styles to `<head>` section and import the module to your page.

```html
<link rel="stylesheet" href="/node_modules/@refinitiv-ui/demo-block/demo.css" />
```

```javascript
<script type="module">
  import '@refinitiv-ui/demo-block';
</script>
```

Wrap element or content that you want to show in demo block inside `<demo-block>`.

```html
<demo-block header="Layout option" layout="normal" tags="header">
  This is standard block layout
  <h1>Header Level 1</h1>
  <h2>Header Level 2</h2>
  <h3>Header Level 3</h3>
</demo-block>
```
npm package: @refinitiv-ui/elements
Description: Element Framework Elements
Author: LSEG
Latest version: 7.15.6

# Element Framework

Element Framework (EF) is a collection of elements that includes theming capability within the LSEG Workspace standardised components. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.

## Usage

EF elements are published under single package.

```sh
npm install @refinitiv-ui/elements
```

The elements require a theme to instantiate itself in the app. LSEG Workspace theme is called Halo theme and you can install it from npm command.

```sh
npm install @refinitiv-ui/halo-theme
```

Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow LSEG Workspace standardised components, it is required styles of some native elements e.g. typography.

<br>

> The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text

<br>

```javascript
// import element and its Halo dark theme
import '@refinitiv-ui/elements/button';
import '@refinitiv-ui/elements/button/themes/halo/dark';
import '@refinitiv-ui/elements/panel';
import '@refinitiv-ui/elements/panel/themes/halo/dark';

// import native styles for typography, css variables, etc.
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
```

Now, you can use the elements in your app.

```css
.content {
  width: 100%;
  height: 500px;
}
```

```html
<ef-panel class="content" spacing>
  <h2>Hello EF!</h2>
  <ef-button cta>OK</ef-button>
</ef-panel>
```

# Documentation

See list of elements, demo and more tutorial by visiting [EF Documentation](https://ui.refinitiv.com/).

# License

Apache License 2.0. However, Halo theme shall only be used within LSEG products or services due to license of the font "Proxima Nova Fin".
npm package: @refinitiv-ui/test-helpers
Description: Helper methods for writing tests in EF elements
Author: LSEG
Latest version: 7.1.5

# Element Framework Test Helpers

A collection of test helper methods for Element Framework. It uses many features from [**@open-wc/testing**](https://www.npmjs.com/package/@open-wc/testing) and adding some more shared utility classes to make the testing in EF easier. For more details on the methods about `@open-wc/testing`, please check the [**documentation**](https://open-wc.org/docs/testing/helpers/).
npm package: @refinitiv-ui/theme-compiler
Description: Compiles Element Framework themes into usable JavaScript
Author: LSEG
Latest version: 7.3.0

# Element Framework Theme Compiler

Theme compiler for Element Framework Themes.

```sh
npm install -D @refinitiv-ui/theme-compiler
```

The theme compiler needs to be a dependency of each theme.
In the `package.json` of each theme, add a new build script which calls the compiler.

## Usage

You can create npm script and use `theme-compiler` command to build EF theme.

```json
"scripts": {
  "build": "theme-compiler [output directory] [additional less variables]"
}
```

Example:

```json
"scripts": {
  "build": "theme-compiler dark --variant=dark"
}
```

## Watch

To watch for changes while you are developing a theme, you can include the `watch` library.

```sh
npm i --save-dev watch
```

Modify you npm scripts to watch for file changes and recompile the theme.

Example:

```json
"scripts": {
  "build": "theme-compiler dark --variant=dark",
  "watch": "watch 'npm run build' src"
}
```

Then you can run `npm run watch`.

## Browsers

Theme Compiler uses the [Browserslist](https://github.com/browserslist/browserslist) to Autoprefixing CSS, you can create `.browserslistrc` in your project to specify the target browsers. See [Browserlist](https://github.com/browserslist/browserslist) for more information.