open-index/open-npm huggingface dataset:
npm package: @m-filescorporation/uix-extensions
Description: M-Files UIX v2
Author: M-Files
Latest version: 0.0.3

# M-Files UI Extensibility Framework

A TypeScript type definitions package for the M-Files [User Interface Extensibility Framework](https://developer.m-files.com/Frameworks/User-Interface-Extensibility-Framework/Reference/). This package provides types to develop client-side applications that extend the M-Files client interface, supporting features like custom commands, dashboards, and event handling.


## Installation

Install the package via npm:

```bash
npm install @m-filescorporation/uix-extensions
```


## Usage


### ShellUI module

See more information about the [modules](https://developer.m-files.com/Frameworks/User-Interface-Extensibility-Framework/Reference/Overview/Modules/) and how to use the ShellUI module for example to create new commands and open new Dashboards.

```typescript
import {
  IShellUI,
  IShellFrame,
  Event,
} from "@m-filescorporation/uix-extensions";

// Entry point for the ShellUI module
function OnNewShellUI(shellUI: IShellUI): void {
  // Register for the NewShellFrame event
  shellUI.Events.Register(Event.NewShellFrame, (shellFrame: IShellFrame) => {
    // Register for the Started event
    shellFrame.Events.Register(Event.Started, () => {
      // Show a message when the ShellFrame is ready
      shellFrame.ShowMessage("ShellFrame is available for use.");
    });
  });
}

// Bind to global scope (required for UIX)
window.OnNewShellUI = OnNewShellUI;
```

### Dashboard Module

Dashboards are standalone web applications running inside the M-Files UI. The can access the features of the M-Files Host application using
the UIXv2 framework.

See more information about the [dashboards](https://developer.m-files.com/Frameworks/User-Interface-Extensibility-Framework/Reference/Overview/Dashboards/).

```typescript
import {
  IDashboard,
  Event
} from "@m-filescorporation/uix-extensions";

function OnNewDasboard(dashboard: IDashboard): void {

    // Register for changes of the CustomData for the Dashboard
    dashboard.Events.Register(Event.CustomDataChanged, (data) => {
        // Render new data based on newly arrived data
    });
}

```


## More Information

For more information on M-Files UIXv2 development:

- [M-Files Developer Portal](https://developer.m-files.com/)
- [User Interface Extensibility Framework](https://developer.m-files.com/Frameworks/User-Interface-Extensibility-Framework/)
npm package: @m-kgl/fade
Description: Fade elements
Author: Maximilian Kögl
Latest version: 0.1.1

# Fade
Let elements float from left or right into your screen.

Classes to add:
- fade from left: `crtx-fade-in-left`
- fade from right: `crtx-fade-in-right`

Default time is `3s`:
- set your own time with: `data-fade-time`

# Setup
In TS:
- create `new FadeInComponent()`

In S/CSS:
- `@import '~@m-kgl/fade/dist/css/styles.bundle.css';`
npm package: @m-kutnik/eslint-config
Description: my private ESLint config
Author: Mike
Latest version: 1.2.0

# eslint-config
My own ESLint config.

## Instalation and Usage
You can install ESLint using npm or yarn:
```
$ npm i eslint -D
```

Install my config:
```
$ npm i @m-kutnik/eslint-config -D
```

#### JS Configuration:
```javascript
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parser: 'babel-eslint',
  extends: [
    '@m-kutnik/eslint-config'
  ]
}
```

#### Vue configuration
Firstly install webpack resolver for ESLint:
```
$ npm i -D eslint-import-resolver-webpack
```

```javascript
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    '@m-kutnik/eslint-config',
    'plugin:vue/recommended',
    'eslint:recommended',
    '@vue/prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: './node_modules/@vue/cli-service/webpack.config.js',
      },
    },
  },
}

```

## Excluding files/directories
To exclude files/directories create valid `.eslintignore` file.
Docs are available [here](https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories)

Example:
```
/dist/**
/node_modules/**
```

## Using ESLint
### **The Best Way™**
Install ESLint locally and create a script in `package.json`
```json

{
  ...

  "scripts": {
    "lint": "eslint ./src",
    "fix": "eslint --fix ./src"
  },  

  ...  
},
```
### *The OK way™*

If ESLint is installed locally:

```
$ npx eslint ./src
```
If ESLint is installed globally:

```
$ eslint ./src
```
npm package: @m-kw/id-generator
Description: With this package you get a simple id generator. With only one function you can easily generate id containing capitalized letters, small letters and numbers, all chosen randomly.
Author: Magda Kwiatkowska-Witoń
Latest version: 1.0.1

# id-generator

With this package you get a simple id generator. With only one function you can easily generate id containing capitalized letters, small letters and numbers, all chosen randomly.

## How to install?

- npm i @m-kw/id-generator

- yarn add @m-kw/id-generator

## How to use?

You simply import randomID in your file and use randomID(val) function. Val is the expected length of your id. And that's all!