open-index/open-npm huggingface dataset:
npm package: @flybywiresim/map
Description: FlyByWire Simulations live map
Author: FlyByWire Simulations
Latest version: 0.5.2

# <img src="https://raw.githubusercontent.com/flybywiresim/fbw-branding/master/svg/FBW-Logo.svg" placeholder="FlyByWire" width="400"/>
# FlyByWire Simulations Live Map

## Installation

Install the live map using npm:

    $ npm install --save @flybywiresim/map
npm package: @flybywiresim/react-components
Description: FlyByWire Simulations React components library
Author: FlyByWire Simulations
Latest version: 0.3.2

# <img src="https://raw.githubusercontent.com/flybywiresim/fbw-branding/master/svg/FBW-Logo.svg" placeholder="FlyByWire" width="400"/>
# FlyByWire Simulations React components library

## Installation

Install the library using npm:

    $ npm install --save @flybywiresim/react-components

## Development

### Testing

```
npm run test
```

### Building

```
npm run build
```

### Storybook

To run a live-reload Storybook server on your local machine:

```
npm run storybook
```

To export your Storybook as static files:

```
npm run storybook:export
```

You can then serve the files under `storybook-static` on GitHub pages.

### Generating New Components

To generate all the files needed to start building out a new component:

```
npm run generate YourComponentName
```

This will generate:

```
/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.scss
    index.ts
```

The default templates for each file can be modified under `util/templates`.

Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
npm package: @flybywiresim/rollup-plugin-msfs
Description: Rollup plugin for bundling Microsoft Flight Simulator HTML instruments
Author: FlyByWire Simulations
Latest version: 0.3.1

# <img src="https://raw.githubusercontent.com/flybywiresim/fbw-branding/master/svg/FBW-Logo.svg" placeholder="FlyByWire" width="400"/>


[![Discord](https://img.shields.io/discord/738864299392630914.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UjzuHMU)

[![GitHub latest release version](https://img.shields.io/github/v/release/flybywiresim/rollup-plugin-msfs.svg?style=flat)](https://github.com/flybywiresim/rollup-plugin-msfs/releases/latest)
[![Github All Releases download count](https://img.shields.io/github/downloads/flybywiresim/rollup-plugin-msfs/total.svg?style=flat)](https://github.com/flybywiresim/rollup-plugin-msfs/releases/latest)
[![GitHub contributors](https://img.shields.io/github/contributors/flybywiresim/rollup-plugin-msfs.svg?style=flat)](https://github.com/flybywiresim/rollup-plugin-msfs/graphs/contributors)

## About

Rollup plugin for bundling Microsoft Flight Simulator HTML instruments

## Configuration

```
{
    name: string,                                       // Name of instrument (must be globally unique to all addons)
    elementName: string,                                // Name of custom element
    outputDir: string,                                  // Output directory for instrument files
    config: { index: string, isInteractive: boolean },  // Instrument configuration
    instrumentDir?: string,                             // Name of instrument ouptut directory (sub-directory of `outputDir`). Defaults to `name`
    jsBundle?: string,                                  // Name of JS rollup bundle. Defaults to bundle.js
    cssBundle?: string                                  // Name of CSS rollup bundle. Defaults to bundle.css
    imports?: string[],                                 // List of HTML/JS imports to add to the template HTML file. Defaults to none 
}
```

## Example usage

```js
const template = require('@flybywiresim/rollup-plugin-msfs');

    // other plugins ...
    template({
        name: 'MFD',
        elementName: 'a380x-mfd-element',
        config,
        imports: ['/JS/dataStorage.js'],
        outputDir: `${__dirname}/../../A380X/html_ui/Pages/VCockpit/Instruments/A380X`,
    }),
}
```
npm package: @flybywiresim/webgl-globe
Description: FlyByWire Simulations live map
Latest version: 0.1.2

# <img src="https://raw.githubusercontent.com/flybywiresim/fbw-branding/master/svg/FBW-Logo.svg" placeholder="FlyByWire" width="400"/>
# FlyByWire Simulations Live Globe

## Installation

Install the globe map using npm:

    $ npm install --save @flybywiresim/webgl-globe
npm package: @flyckt-coding/scss-pack
Description: A scss pack with usefull variables and mixins
Author: Ludvig Flyckt
Latest version: 1.0.3

# scss-pack

a scss pack with mixins, variables and animations

# Installation

1. Run: npm install @flyckt-coding/scss-pack
2. Import the pack to your main scss file: @import "~@flyckt-coding/scss-pack/";
3. To use classes on elements, import it to your react component: import '@flyckt-coding/scss-pack';
4. Start using the features

Featured varaiables:

- Font sizes in:
  - px(2px-54px)
  - em(2px-54px)
  - rem(2px-54px)
  - vw(2px-54px)
  - vh(2px-54px)
- Flex box variants
- Responsive breakpoints
  - mobile()
  - mobile-landscape()
  - tablet()
  - tablet-landscape()
  - desktop()
- Colors
- Mixins

mixin regular($h1: $f-5xl, $h2: $f-3xl, $p: $f-md){
h1(
font-size: $h1;
)
h2(
font-size: $h2;
)
p(
font-size: $p;
)
}

@mixin desktop($width) {
@if($width){
@media screen and (min-width: $width) {
@content;
}
}
@